JS to achieve the same page multiple motion effect method _javascript Skill

This article illustrates the method of JS to achieve multiple motion effects on the same page. Share to everyone for your reference. The specific analysis is as follows:

The principle of implementation is to give these five elements, loops, and events at the time of the call. It should be noted that each element of the timer needs to be separated.

Point one:

var speed = (target-obj.offsetwidth)/8;

Buffering the movement effect, starting at a very fast pace, and then getting slower until the stop

Speed = speed>0? Math.ceil (Speed): Math.floor (speed);

If the speed is greater than 0, the whole is rounded up, and if the speed is less than 0, the whole is rounded down.

Point two:

if (obj.offsetwidth = = target) {
clearinterval (obj.timer);
} else{
obj.style.width = obj.offsetwidth+speed+ "px";
}

The element width and the target value are compared, if equal, the timer is closed, otherwise the width continues to increase.

Point three:

For (i=0 i<runs_li.length; i++) {
runs_li[i].timer = null;
Runs_li[i].onmouseover = function () {
startrun (this,300);
}
Runs_li[i].onmouseout = function () {
startrun (this,80);
}
}

Each element with its own timer properties, the respective mouse events, in the mouse event called the motion function.

Finally, on the code:

<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">  

The

wants this article to help you with your JavaScript programming.