<!doctype html> <html> <head> <meta charset="utf-8"> <title>无标题文档</title> <style> #div1{ width:100px; height:200px; background:red; position:absolute; left:-100px } #span1{ width:20px; height:60px; background:blue; position:absolute; line-height:20px; top:70px; right:-20px; } </style> <script> window.onload=function(){ var odiv=document.getElementById(‘div1‘); odiv.onmouseover=function(){ onStart(0); } odiv.onmouseout=function(){ onStart(-100); } } var timer=null; function onStart(oTag){ var odiv=document.getElementById(‘div1‘); clearInterval(timer); var speed=null; if(speed>oTag){ speed=-10; }else{ speed=10; } timer=setInterval(function (){ if(odiv.offsetLeft==oTag){ clearInterval(timer); }else{ odiv.style.left=odiv.offsetLeft+speed+‘px‘; } },30) } </script> </head> <body> <div id="div1"> <span id="span1">分享到</span> </div> </body> </html>
关于速度的小解释
分享框
left30 tag300 正
left600 tag30 负
原文：http://www.cnblogs.com/zwn-lucky7/p/6832962.html