Thứ Năm, 23 tháng 10, 2008

Make HTML Text Flashing!

You can do it with some JavaScript magic...


<script type="text/javascript">

<!--

var b_timer = null; // blink timer

var b_on = true; // blink state

var blnkrs = null; // array of spans

function blink() {

var tmp = document.getElementsByTagName("span");

if (tmp) {

blnkrs = new Array();

var b_count = 0;

for (var i = 0; i < tmp.length; ++i) {

if (tmp
.className == "blink") {

blnkrs[b_count] = tmp[i];

++b_count;

}

}

// time in m.secs between blinks

// 500 = 1/2 second

blinkTimer(500);

}

}

function blinkTimer(ival) {

if (b_timer) {

window.clearTimeout(b_timer);

b_timer = null;

}

blinkIt();

b_timer = window.setTimeout('blinkTimer(' + ival + ')', ival);

}

function blinkIt() {

for (var i = 0; i < blnkrs.length; ++i) {

if (b_on == true) {

blnkrs[i].style.visibility = "hidden";

}

else {

blnkrs[i].style.visibility = "visible";

}

}

b_on =!b_on;

}

//-->

</script>





A tad of CSS, e.g.,...
<style type="text/css">

.blink {

font-size: 15px;

color: red;

display: inline;

}

</style>


And a bit of mark-up... ...

<body onload="blink();">

...

This is a test of the <span class="blink">blinking text</span> thingy...which <span class="blink">blinks</span> (in theory)...

...




[i]But just a warning, most people don't like alot of blinking stuff, so you probably should not over-use the effect.


0 nhận xét:

 

blogger templates | Make Money Online