1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title></title> 6 <style> 7 #div1{width: 150px; height: 200px;background-color:green;position: absolute;left: -150px;} 8 #div1 span{position: absolute;width: 20px; height: 60px;line-height: 20px;background-color: red;right: -20px;top: 70px;} 9 </style> 10 <script> 11 window.onload=function(){ 12 var oDiv=document.getElementById('div1'); 13 14 oDiv.onmouseover=function(){ 15 startMove(); 16 }; 17 oDiv.onmouseout=function(){ 18 startMove2(); 19 }; 20 } 21 var timer=null; 22 23 function startMove(){ 24 var oDiv=document.getElementById('div1'); 25 26 clearInterval(timer); 27 timer=setInterval(function(){ 28 if(oDiv.offsetLeft==0){ 29 clearInterval(timer); 30 } 31 else{ 32 oDiv.style.left=oDiv.offsetLeft+10+'px'; 33 } 34 },30); 35 } 36 37 function startMove2(){ 38 var oDiv=document.getElementById('div1'); 39 40 clearInterval(timer); 41 timer=setInterval(function(){ 42 if(oDiv.offsetLeft==-150){ 43 clearInterval(timer); 44 } 45 else{ 46 oDiv.style.left=oDiv.offsetLeft-10+'px'; 47 } 48 },30); 49 } 50 </script> 51 </head> 52 <body> 53 <div id="div1"> 54 <span>分享到</span> 55 </div> 56 </body> 57 </html>