Frontend practices-JavaScript-animation (3)

Animation effect: When the mouse moves up, the DIV is gradually removed slowly; when the mouse leaves, it gradually slows down to restore the original position.

Code:

    
     Buffer Animation    Script window. onload = function () {var oDiv = document. getElementById ('p1'); oDiv. onmouseover = function () {startMove (0);} oDiv. onmouseout = function () {startMove (-200) ;}} var timer = null; // The iTarget parameter sets the border of DIV movement. // Cancel each mouse trigger event set by setInterval. // Set the DIV motion. Function startMove (iTarget) {clearInterval (timer); var oDiv = document. getElementById ('p1'); timer = setInterval (function () {var speed = (iTarget-oDiv. offsetLeft)/20; speed = speed> 0? Math. ceil (speed): Math. floor (speed); if (oDiv. offsetLeft = iTarget) {clearInterval (timer);} else {oDiv. style. left = oDiv. offsetLeft + speed + 'px '; }}, 30)} script    
Share
 

The above is the content of the front-end practice-JavaScript-animation (3). For more information, see PHP Chinese website (www.php1.cn )!