1、匀速运动
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>动画</title> <style> body,div,span{ margin:0; padding:0; } #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> </head> <body> <div id="div1"> <span id="share">分享</span> </div> </body> </html> <script type="text/javascript"> window.οnlοad=function(){ var oDiv=document.getElementById('div1'); oDiv.οnmοuseοver=function(){ startMove(9,0); } oDiv.οnmοuseοut=function(){ startMove(-7,-200); } } var timer=null; function startMove(speed,iTarget){ clearInterval(timer); var oDiv=document.getElementById('div1'); timer=setInterval(function(){ if(Math.floor(Math.abs((oDiv.offsetLeft-iTarget)/Math.abs(speed)))==0){ oDiv.style.left=iTarget+"px"; clearInterval(timer); }else{ oDiv.style.left=oDiv.offsetLeft+speed+"px"; } },10); } </script> 2、变速运动 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>动画--缓冲运动</title> <style> body,div,span{ margin:0; padding:0; } #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> </head> <body> <div id="div1"> <span id="share">分享</span> </div> </body> </html> <script type="text/javascript"> window.οnlοad=function(){ var oDiv=document.getElementById('div1'); oDiv.οnmοuseοver=function(){ startMove(0); } oDiv.οnmοuseοut=function(){ startMove(-200); } } var timer=null; 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"; } },20); } </script>