JS 缓动动画封装函数

可保存在js中,在html页面引入使用.

例如保存在 animate.js

复制代码
 1 <html>
 2 　　<head>
 3 　　　　<script src='animate.js'></script>
 4 　　</head>
 5 　　<body>
 6 　　　　<script>
 7 　　　　　　animation(obj,target,callback)
 8 　　　　</script>
 9 　　</body>
10 </html>
复制代码

 

animate.js

复制代码
 1 function animation(obj, target,callback) {
 2 
 3     //让定时器唯一
 4     clearInterval(obj.timer)
 5     
 6     obj.timer = setInterval(function () {
 7         
 8         var step = (target - obj.offsetLeft) / 10
 9         //算元运算判断,如果步长值>0 就向上取整,否则就向下取整
10         step = step > 0 ? Math.ceil(step) : Math.floor(step)
11 
12         if (obj.offsetLeft == target) {
13             clearInterval(obj.timer)
14 
15             //判断是否有回调函数
16             // if(callback){
17             //     callback()
18             // }
19 
20             // 短路运算
21             //如果有传入参数,就执行callback()
22             //若没有,则返回
23             callback && callback()
24         }
25         obj.style.left = obj.offsetLeft + step + 'px'
26     },5)
27 }
复制代码

 

posted @   伊凡晴天  阅读(223)  评论(0)  编辑  收藏  举报
编辑推荐：
· AI与.NET技术实操系列（二）：开始使用ML.NET
· 记一次.NET内存居高不下排查解决与启示
· 探究高空视频全景AR技术的实现原理
· 理解Rust引用及其生命周期标识（上）
· 浏览器原生「磁吸」效果！Anchor Positioning 锚点定位神器解析
阅读排行：
· DeepSeek 开源周回顾「GitHub 热点速览」
· 物流快递公司核心技术能力-地址解析分单基础技术分享
· .NET 10首个预览版发布：重大改进与新特性概览！
· AI与.NET技术实操系列（二）：开始使用ML.NET
· 单线程的Redis速度为什么快？
点击右上角即可分享
微信分享提示
AI FOR CODE 大赛