1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title></title> 6 <style> 7 #div1{width: 100px;height: 200px;background-color: grey;position: absolute;left: -100px;top: 400px;} 8 #div1 span{width: 20px;height: 60px;background-color: orange;position: absolute;left: 100px;top: 70px;line-height: 20px;} 9 </style> 10 <script> 11 window.onload=function(){ 12 var oDiv1=document.getElementById("div1"); 13 oDiv1.onmouseover=function(){ 14 startMove(5,0); 15 } 16 oDiv1.onmouseout=function(){ 17 startMove(-5,-100); 18 } 19 var timer=null; 20 function startMove(speed,iTarget){ 21 var oDiv1=document.getElementById("div1"); 22 // var speed=5; 23 clearInterval(timer); 24 timer=setInterval(function(){ 25 if(oDiv1.offsetLeft==iTarget){ 26 clearInterval(timer); 27 }else{ 28 oDiv1.style.left=oDiv1.offsetLeft+speed+"px"; 29 } 30 },30); 31 } 32 // function startMove2(){ 33 // var oDiv1=document.getElementById("div1"); 34 // var speed=-5; 35 // clearInterval(timer); 36 // timer=setInterval(function(){ 37 // if(oDiv1.offsetLeft==-100){ 38 // clearInterval(timer); 39 // }else{ 40 // oDiv1.style.left=oDiv1.offsetLeft+speed+"px"; 41 // } 42 // },30); 43 // } 44 } 45 </script> 46 </head> 47 <body> 48 <div id="div1"> 49 <span>分享到</span> 50 </div> 51 </body> 52 </html>
javascript9分享到菜单，菜单在屏幕左侧的移出和收回
原文：https://www.cnblogs.com/tilyougogannbare666/p/14154744.html