时间:2021-07-01 10:21:17 帮助过:5人阅读
简单动画
实现效果:
解答:
<!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> /* 版本1.0--代码量大,函数没有参数,效率低 window.onload = function(){ var oDiv = document.getElementById('div1'); oDiv.onmouseover = function(){ startMove(); } oDiv.onmouseout = function(){ startMove1(); } } var timer = null; function startMove(){ clearInterval(timer); var oDiv = document.getElementById('div1'); timer = setInterval(function(){ if(oDiv.offsetLeft == 0){ clearInterval(timer); }else{ oDiv.style.left = oDiv.offsetLeft+10+'px'; } },30) } function startMove1(){ clearInterval(timer); var oDiv = document.getElementById('div1'); timer = setInterval(function(){ if(oDiv.offsetLeft == -200){ clearInterval(timer); }else{ oDiv.style.left = oDiv.offsetLeft-10+'px'; } },30) } */ /* 版本2.0 startMove函数引入参数speed,iTarget,简化代码,提高代码质量 window.onload = function(){ var oDiv = document.getElementById('div1'); oDiv.onmouseover = function(){ startMove(10,0); } oDiv.onmouseout = function(){ startMove(-10,-200); } } var timer = null; function startMove(speed,iTarget){ clearInterval(timer); var oDiv = document.getElementById('div1'); timer = setInterval(function(){ if(oDiv.offsetLeft == iTarget){ clearInterval(timer); }else{ oDiv.style.left = oDiv.offsetLeft+speed+'px'; } },30) } */ // 进一步优化代码,只引入一个参数 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 = 0; if(oDiv.offsetLeft > iTarget){ speed = -10; }else{ speed = 10; } 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.gxlcms.com)!