一、运动概述
- 运动原理:JavaScript 实现运动的原理,就是通过定时器不断改变元素的位置,直至到达目标点后停止运动。 通常,要让元素动起来,我们会通过改变元素的 left 和 top 值来改变元素的相对位置。
- 运动三个步骤:
- 首先要用定时器来定时改变元素位置
- 然后实时获取元素位置
- 最后判断是否到达指定位置,如果达到则清除定时器
二、匀速运动
匀速运动实质上就是让元素在相同的时间内走相同的距离
<script>
var btn = document.querySelector('button')
var div = document.querySelector('div')
btn.onclick = function(){
clearInterval(timer)
var timer = setInterval(()=>{
div.style.left = div.offsetLeft + 10 +'px'
},100)
}
</script>
三、缓冲运动
缓冲运动的实质就是让元素每次运动的距离越来越小,让其运动速度变小
var btn = document.querySelector('button')
var div = document.querySelector('div')
btn.onclick = function(){
var current = div.style.left
var step = 10
var target = 400
clearInterval(timer)
var timer = setInterval(()=>{
step = (target-current)/10
current += step
div.style.left = current + 'px'
if(current==target){
clearInterval(timer)
}
},100)
}
标签:Java,Script,元素,timer,current,var,运动,div
From: https://www.cnblogs.com/nanchengleiluo/p/16603263.html