实现效果：
解答：
<!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--动画（一）的内容。