在这篇文章<强>打造通用的匀速运动框架(实例讲解)中,封装了一个匀速运动框架,我们在这个框架的基础之上,加上缓冲运动效果,然后用运动框架来做幻灯片(上下,左右)。
缓冲运动通常有两种常见的表现:比如让一个div从0运动到500年,一种是事件触发的时候,速度很快,一种是事件触发的时候慢,然后慢慢加快。我们来实现先块后慢的,常见的就是开的车,比如刚从高速路上下来的车,就是120公里/小时,然后进入匝道,变成40公里/时。或者40公里/小时进入小区,最后停车,变成0公里/小时。从120公里/小时→40公里/小时,或者40公里→0公里/小时,都是速度先块后慢,这种运动怎么用程序来表示呢?
可以用目标距离(500)——当前距离(200)/一个系数(比如12),就能达到速度由块而慢的变化,当前距离在起点,分子(500 - 0)最大,所以速度最大,如果当前距离快要接近500年,分子最小,除完之后的速度也是最小。
& lt; style>
div {
宽度:200 px;
身高:200 px;
背景:红色;
位置:绝对的;
左:0 px;
}
& lt;/style>
& lt; script>
窗口。onload=function () {
var oBtn=文档。querySelector(“输入”),
oBox=文档。querySelector(#箱),
速度=0,计时器=零;
oBtn。onclick=function () {
计时器=setInterval(函数(){
速度=(500 - oBox。offsetLeft)/8;
oBox.style。左=oBox。offsetLeft +速度+“px”;
},30);
}
}
& lt;/script>
& lt;/head>
& lt; body>
& lt;输入类型="按钮" value=" https://www.yisu.com/zixun/动起来“比;
& lt; div id="盒子"祝辞& lt;/div>
& lt;/body>
但是,div并不会乖乖地停止在500 px这个目标位置,最终却是停在497.375 px,只要查看当前的速度,当前的值就知道原因了
你会发现,速度永远都在0.375这里停着,获取到的当前的距离停在497 px ?这里有个问题,我们的div不是停在497.375 px吗,怎么获取到的没有了后面的小数0.375呢?计算机在处理浮点数会有精度损失。我们可以单独做一个小测试:
& lt; div id="盒子"祝辞& lt;/div>
& lt; script>
var oBox=文档。querySelector(“#箱”);
警报(oBox。offsetLeft);
& lt;/script>
你会发现这段代码获取到左偏移是30 px而不是行间样式中写的30.2 px。因为在获取当前位置的时候,会舍去小数,所以速度永远停在0.375 px,位置也是永远停在497年,所以,为了到达目标,我们就得把速度变成1,对速度向上取整(数学。装天花板),我们就能把速度变成1,div也能到达500
oBtn。onclick=function () {
计时器=setInterval(函数(){
速度=(500 - oBox。offsetLeft)/8;
如果速度比;0){
速度=数学。装天花板(速度);
}
控制台。日志(速度,oBox。offsetLeft);
oBox.style。左=oBox。offsetLeft +速度+“px”;
},30);
}
第二个问题,如果div的位置是在900年,也就是说从900年运动到500年,有没有这样的需求呢?肯定有啊,轮播图,从右到左就是这样的啊。
& lt; style>
#箱{
宽度:200 px;
身高:200 px;
背景:红色;
位置:绝对的;
左:900 px;
}
& lt;/style>
& lt; script>//& lt; ! [CDATA [
窗口。onload=function () {
var oBtn=文档。querySelector(“输入”),
oBox=文档。querySelector(#箱),
速度=0,计时器=零;
oBtn。onclick=function () {
计时器=setInterval(函数(){
速度=(500 - oBox。offsetLeft)/8;
如果速度比;0){
速度=数学。装天花板(速度);
}
oBox.style。左=oBox。offsetLeft +速度+“px”;
},30);
}
}//]]祝辞& lt;/script>
& lt;/head>
& lt; body>
& lt;输入类型="按钮" value=" https://www.yisu.com/zixun/动起来“比;
& lt; div id="盒子"祝辞& lt;/div>
& lt;/body>
