<body>
<input type="button" id="btn" value="https://bbs.csdn.net/topics/影片 800">
<input type="button" id="btn1" value="https://bbs.csdn.net/topics/影片 400">
<div id="box">
</div>
<div id="box1">
</div>
<script>
var btn = document.getElementById('btn');
var btn1 = document.getElementById('btn1');
var box = document.getElementById('box');
var box1 = document.getElementById('box1');
btn.onclick = function () {
animate(box, 800);
animate(box1, 800);
}
btn1.onclick = function () {
animate(box, 400);
animate(box1, 400);
}
function animate(element, target) {
if (element.timerId) {
clearInterval(element.timerId);
timerId = null;
}
element.timerId = setInterval(function () {
var step = 10;
var current = element.offsetLeft;
if (current >= target) {
clearInterval(element.timerId);
element.style.left = target + 'px';
return;
}
current += step;
element.style.left = current + 'px';
}, 30);
}
</script>
</body>
---------------------------------
var btn1 = document.getElementById('btn1');
var btn2 = document.getElementById('btn2');
var box1 = document.getElementById('box1');
var box2 = document.getElementById('box2');
btn1.onclick = function(){
animate(box1,200);
}
btn2.onclick = function(){
animate(box2,300);
}
function animate(element,traget) {
if (element.timeId) {
clearInterval(element.timeId);
timdId = null;
}
element.timeId = setInterval(fn,30);
var current = element.offsetLeft;
function fn(){
var speed = 10;
current = current > traget ? current : current+=speed;
element.style.left = current + 'px';
}
}
uj5u.com熱心網友回復：
用 requestAnimationFrame 效率更高，你試試uj5u.com熱心網友回復：
老哥 我剛接觸JS沒多久 你說的這個好像是H5的吧 我還沒學。。。
uj5u.com熱心網友回復：
第二種在元素到達目標位置后計時器還在一直運行。屬于浪費資源的行為。uj5u.com熱心網友回復：
感謝！！！
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/123049.html
標籤：JavaScript
下一篇：請教大佬兩道簡單的題