原生JS动画 定时器 传参

时间：2022-04-26 21:52:41

上栗子

<!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>
标签：

相关文章