上栗子
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>鼠标移入移出</title> <style> *{margin: 0;padding: 0;} #div{ position: relative; left: -200px; top: 0; width: 200px; height: 200px; background: orange; } #div span{ position: absolute; left: 200px; top: 30%; height: 40px; width: 20px; background: #eee; cursor: pointer; } </style> </head> <body> <div id="div"><span>分享</span></div> <script> window.onload = function(){ var oDiv = document.getElementById('div'); oDiv.onmouseover = function(){ startMove(); } oDiv.onmouseout = function(){ startMove1(); } var timer; function startMove(){ clearInterval(timer); //清除定时器 timer = setInterval(function(){ if(oDiv.offsetLeft == 0){ clearInterval(timer); }else{ oDiv.style.left = oDiv.offsetLeft+10+'px'; } },30) } function startMove1(){ clearInterval(timer); //清除定时器 timer = setInterval(function(){ if(oDiv.offsetLeft == -200){ clearInterval(timer); }else{ oDiv.style.left = oDiv.offsetLeft-10+'px'; } },30) } } </script> </body> </html>startMove（） 和 startMove1（）非常相似，可以使用参数
js代码变成
<script> window.onload = function(){ var oDiv = document.getElementById('div'); oDiv.onmouseover = function(){ startMove(10,0); } oDiv.onmouseout = function(){ startMove(-10,-200); } var timer; function startMove(speed,offLeft){ clearInterval(timer); //清除定时器 timer = setInterval(function(){ if(oDiv.offsetLeft == offLeft){ clearInterval(timer); }else{ oDiv.style.left = oDiv.offsetLeft+speed+'px'; } },30) } } </script>参数越少越好，速度可以判断
<script> window.onload = function(){ var oDiv = document.getElementById('div'); oDiv.onmouseover = function(){ startMove(0); } oDiv.onmouseout = function(){ startMove(-200); } var timer; function startMove(offLeft){ clearInterval(timer); //清除定时器 timer = setInterval(function(){ var speed; if(oDiv.offsetLeft > offLeft){ speed = -10; }else{ speed = 10; } if(oDiv.offsetLeft == offLeft){ clearInterval(timer); }else{ oDiv.style.left = oDiv.offsetLeft+speed+'px'; } },30) } } </script>