1.物体匀速运动
let div = document.getElementsByTagName('div')[0],
btns = document.getElementsByTagName('button')
btns[0].onclick = function() {
console.log(div)
startMove(div, 300)
}
// 使用dom.offsetLeft dom必须是定位的
let timer = null
function startMove(dom, dis) {
let speed = dom.offsetLeft < dis ? 7 : -7
clearInterval(timer)
timer = setInterval(() => {
if (Math.abs(dis - div.offsetLeft) < Math.abs(speed)) {
dom.style.left = dis + 'px'
clearInterval(timer)
} else {
dom.style.left = dom.offsetLeft + speed + 'px'
}
}, 30)
}
2.缓冲运动
物体的速度 距离目标点越近速度越慢 当到达目标点时 速度为0
let div = document.getElementsByTagName('div')[0],
btns = document.getElementsByTagName('button')
btns[0].onclick = function() {
buffMove(div, 300)
}
let timer = null
function buffMove(dom, dis) {
clearInterval(timer)
let speed = null
timer = setInterval(() => {
speed = (dis - dom.offsetLeft) / 20
speed = speed < 0 ? Math.floor(speed) : Math.ceil(speed)
if (dis == dom.offsetLeft) {
dom.style.left = dis + 'px'
clearInterval(timer)
} else {
dom.style.left = dom.offsetLeft + speed + 'px'
}
}, 30)
}
3.多物体运动
let divArray = [].slice.call(document.getElementsByTagName('div'