为了账号安全,请及时绑定邮箱和手机立即绑定

这是什么问题

var speed = (iTarget-obox.offsetLeft)/20;除以20的情况下反复用鼠标移动(等box全部出来鼠标再移开)  8、9次就开始出现bug了(移上移除算一次)。特别的如果/30立马就出现问题了?


<!doctype html>

<html>

<head>

<meta charset="UTF-8">

<title>缓冲运动</title>

<style type="text/css">

*{margin: 0;padding: 0;}

#box{width: 200px;height: 200px;background-color: red;position: relative;left: -200px;top: 0;}

#box span{width: 20px;height: 50px;position: absolute;top: 50px;left: 200px;background-color: blue;}

</style>

<script type="text/javascript">

window.onload=function(){

var obox = document.getElementById('box');

obox.onmouseover = function(){

startmove(0);

}

obox.onmouseout = function(){

startmove(-200);

}


var timer = null;

function startmove(iTarget){

clearInterval(timer);

var obox = document.getElementById('box');

var speed = (iTarget-obox.offsetLeft)/20;

speed = speed > 0?Math.ceil(speed):Math.floor(speed);

timer = setInterval(function () {

if (obox.offsetLeft==iTarget) {

clearInterval(timer);

}else{

obox.style.left = obox.offsetLeft + speed+'px';

}

},30)

}


</script>

</head>

<body>

<div id="box"><span>分享</span></div>

</body>

</html>


正在回答

1 回答

需要把

var speed = (iTarget-obox.offsetLeft)/20;

speed = speed > 0?Math.ceil(speed):Math.floor(speed);

放进定时器里面,这样speed 的值才能变化,

speed = speed > 0?Math.ceil(speed):Math.floor(speed);

取整==iTarget让定时器停止

0 回复 有任何疑惑可以回复我~

举报

0/150
提交
取消
JS动画效果
  • 参与学习       113924    人
  • 解答问题       1443    个

通过本课程JS动画的学习,从简单动画开始,逐步深入各种动画框架封装

进入课程

这是什么问题

我要回答 关注问题
意见反馈 帮助中心 APP下载
官方微信