各位大佬,请问JavaScript做前端动画的时候,如果设置成这样子,动画函数中的if语句不是>=而是==,结果会是盒子只在所定义的距离参数target=200时才会停下,不然会一直动下去,这是为什么呢?求解答
<body>
<div>this is a cartoon</div>
<p>flash</p>
<button>点击</button>
<script>
function aminate(obj, target) {
clearInterval(obj.time);
obj.time = setInterval(function () {
if (obj.offsetLeft == target) {
clearInterval(obj.time);
}
obj.style.left = obj.offsetLeft + 1 + 'px';
}, 30)
}
var div = document.querySelector('div');
var span = document.querySelector('p');
var btn = document.querySelector('button');
aminate(div, 300);
btn.addEventListener('click', function () {
aminate(span, 300);
});
</script>
</body>
第二个小问题,这是一个点击+盒子移动动画的程序,第一次点击移动到指定位置,到之后点击还可以移动一小段距离,请问这是为什么呢?
<body>
<div>this is a cartoon</div>
<p>flash</p>
<button>点击</button>
<script>
function aminate(obj, target) {
clearInterval(obj.time);
obj.time = setInterval(function () {
if (obj.offsetLeft >= target) {
clearInterval(obj.time);
}
obj.style.left = obj.offsetLeft + 1 + 'px';
}, 30)
}
var div = document.querySelector('div');
var span = document.querySelector('p');
var btn = document.querySelector('button');
aminate(div, 300);
btn.addEventListener('click', function () {
aminate(span, 300);
});
</script>
</body>