<!DOCTYPE html> <html> <head> <title>侧边栏分享</title> <style type="text/css"> *{margin: 0px;padding: 0px;} #div1{width: 120px;height: 200px;background: red;position: absolute;left: -120px;} #span1{width: 20px;height: 60px;background: blue;position: absolute;top: 70px;right: -20px;line-height: 20px;} </style> <script type="text/javascript"> window.onload=function(){ var oDiv = document.getElementById('div1'); oDiv.onmouseover=function(){ startMove(0); } oDiv.onmouseout=function(){ startMove(-120); } } var timer=null; function startMove(iTarget){ var oDiv = document.getElementById('div1'); clearInterval(timer); timer=setInterval(function(){ var speed=0; if (iTarget<0) { 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="span1"> 分享到 </span> <p>1111</p> <p>2222</p> <p>3333</p> </div> </body> </html>