<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <title>Document</title> </head> <style> #div1{ 150px; height: 200px; background-color: green; position: absolute; left:-150px; } #div1 span{ position: absolute; 20px; height: 60px; line-h eight:20px ; background: blue; right:-20px; top:70px; } </style> <body> <div id="div1" > <span>分享到</span> </div> </body> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> window.onload=function(){ var oDiv=document.getElementById('div1'); oDiv.onmouseover=function(){ startMove(0); } oDiv.onmouseout=function(){ startMove(-150); } } var timer=null; function startMove(iTarget){ var oDiv=document.getElementById('div1'); clearInterval(timer); 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> </html>