前端实践--JavaScript--动画(三)
程序员文章站
2022-05-06 18:03:46
...
实现效果:当鼠标移动上去时,DIV逐渐变慢的移除;当鼠标离开时,又逐渐变慢的恢复原位置。
代码:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>缓冲动画</title> <style type="text/css"> body,div,span{ margin:0; padding; } #div1{ width:200px; height:200px; background:red; position:relative; left:-200px; top:0; } #div1 span{ width:20px; height:50px; background:blue; position:absolute; left:200px; top:75px; } </style> <script> window.onload = function(){ var oDiv = document.getElementById('div1'); oDiv.onmouseover = function(){ startMove(0); } oDiv.onmouseout = function(){ startMove(-200); } } var timer = null; // 参数iTarget,设置DIV移动的边界。 // 取消由 setInterval()设置的每一次触发鼠标事件。 // 设置DIV的运动。 function startMove(iTarget){ clearInterval(timer); var oDiv = document.getElementById('div1'); 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> </head> <body> <div id="div1"> <span id="share">分享</span> </div> </body> </html>
以上就是前端实践--JavaScript--动画(三)的内容,更多相关内容请关注PHP中文网(www.php.cn)!