1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>分享到</title> 6 <style> 7 #div1{ 8 150px; 9 height: 200px; 10 background: green; 11 position: absolute; 12 left: -150px; 13 } 14 #div1 span{ 15 position: absolute; 16 20px; 17 height: 60px; 18 line-height: 20px; 19 background: blue; 20 right: -20px; 21 top: 70px; 22 } 23 #div1 span:hover{ 24 cursor: pointer; 25 } 26 </style> 27 </head> 28 <body> 29 <div id="div1"> 30 <span>分享到</span> 31 </div> 32 <script> 33 var oDiv = document.getElementById('div1'); 34 var timer = null; 35 // 方法一: 36 // function startMove(){ 37 // var oDiv = document.getElementById('div1'); 38 // 39 // clearInterval(timer); 40 // 41 // timer = setInterval(function(){ 42 // if(oDiv.offsetLeft == 0){ 43 // clearInterval(timer); 44 // }else{ 45 // oDiv.style.left = oDiv.offsetLeft + speed + 'px'; 46 // } 47 // },30); 48 // } 49 // 50 // function stopMove(){ 51 // var oDiv = document.getElementById('div1'); 52 // 53 // clearInterval(timer); 54 // 55 // timer = setInterval(function(){ 56 // if(oDiv.offsetLeft == -150){ 57 // clearInterval(timer); 58 // }else{ 59 // oDiv.style.left = oDiv.offsetLeft - speed + 'px'; 60 // } 61 // },30); 62 // } 63 // 64 // oDiv.onmouseover = function(){ 65 // startMove(); 66 // } 67 // 68 // oDiv.onmouseout = function(){ 69 // stopMove(); 70 // } 71 72 73 // 方法二: 74 // function move(target,speed){ 75 // var oDiv = document.getElementById('div1'); 76 // clearInterval(timer); 77 // timer = setInterval(function(){ 78 // if(oDiv.offsetLeft == target){ 79 // clearInterval(timer); 80 // }else{ 81 // oDiv.style.left = oDiv.offsetLeft + speed + 'px'; 82 // } 83 // },30) 84 // } 85 // oDiv.onmouseover = function(){ 86 // move(0,10); 87 // } 88 // 89 // oDiv.onmouseout = function(){ 90 // move(-150,-10); 91 // } 92 93 94 // 方法三: 95 function move(target){ 96 var oDiv = document.getElementById('div1'); 97 clearInterval(timer); 98 timer = setInterval(function(){ 99 var speed = 0; 100 if(oDiv.offsetLeft > target){ 101 speed = -10; 102 }else{ 103 speed = 10; 104 } 105 if(oDiv.offsetLeft == target){ 106 clearInterval(timer); 107 }else{ 108 oDiv.style.left = oDiv.offsetLeft + speed + 'px'; 109 } 110 },30) 111 } 112 oDiv.onmouseover = function(){ 113 move(0); 114 } 115 116 oDiv.onmouseout = function(){ 117 move(-150); 118 } 119 </script> 120 </body> 121 </html>
效果：
