<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <title>Examples</title> <meta name="description" content=""> <meta name="keywords" content=""> <link href="" rel="stylesheet"> <style> #div1{ width:200px;height:200px;background: green;position: absolute;left:-200px; } #div1 span{ width:20px;height:60px;background: blue;line-height: 20px;position: absolute;right:-20px;top:70px; } </style> <script> 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){ var oDiv=document.getElementById('div1'); clearInterval(timer); timer=setInterval(function(){ if(oDiv.offsetLeft==iTarget){ clearInterval(timer); }else{ oDiv.style.left=oDiv.offsetLeft+speed+'px'; } },30) } </script> </head> <body> <div id="div1"> <span>分享到</span> </div> </body> </html>