原生js的匀速、加速和减速运动
yinmeizhuang
于 2019-12-26 18:20:42 发布
阅读量1.2k
收藏
点赞数
1
CC 4.0 BY-SA版权
文章标签:
js
版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/yinmeizhuang/article/details/103720447
本文详细介绍如何使用原生JavaScript实现元素的匀速、加速和减速运动效果。通过代码示例,展示了不同运动方式的具体实现方法,包括固定增量的匀速运动、逐次增加速度的加速运动,以及逐渐减小位移的减速运动。
摘要生成于
C知道
,由 DeepSeek-R1 满血版支持,
前往体验 >
原生js的匀速、加速和减速运动
//目标值大于初始值 即向右滑动
var odiv = document.getElementsByTagName("div")[0];
var obtn = document.getElementById("btn");
var oline = document.getElementsByTagName("div")[1];
var timer2;
//var count2 = 50;
//目标值
var _target = oline.offsetLeft;
obtn.onclick = () =>{
timer = setInterval(()=>{
//初始值
var _cur = odiv.offsetLeft;
//每一次的距离,越来越小
//目标值大于初始值时,向上取整
var speed = Math.ceil((_target - _cur)/8);
//目标值小于初始值时,向下取整 即向左滑动
//var speed = Math.floor((_target - _cur)/8);
odiv.style.left = odiv.offsetLeft + speed + "px";
if(odiv.offsetLeft == oline.offsetLeft){
odiv.style.left = oline.offsetLeft + "px";
clearInterval(timer2)
}
},20)
}