本文由 DTcms素材网 – DT素材网 发布，转载请注明出处，如有问题请联系我们！js缓动动画封装源码是什么？（代码实例）
收藏 本篇文章给大家带来的内容是关于js缓动动画封装源码是什么？（代码实例），有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。
主要用到offsetLeft、Math.ceil、Math.floor、Math.abs。
注意offsetLeft获取到的的值为四舍五入的style.left的数值，offsetLeft = Math.round(style.left的数值部分) 比如style.left = 369.4px, 获取到的offsetLeft = 369。
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>缓动动画</title> <style> #slow_action { width: 100px; height: 100px; background: pink; position: absolute; } </style> </head> <body> <button id="btn1">运动到400</button> <button id="btn2">运动到0</button> <p id="slow_action"></p> </body> <script> var btn1 = document.getElementById("btn1") var btn2 = document.getElementById("btn2") var p = document.getElementById("slow_action") /** * 动画原理 = 盒子位置 + 步长（步长越来越小） * 盒子位置 = 盒子本身的位置 + (目标位置 - 盒子本身位置)/10 */ btn1.onclick = function () { fn(p,400) } btn2.onclick = function () { fn(p,0) } function fn(ele, target) { clearInterval(ele.timer); ele.timer = setInterval(function () { // var target = 400; //最后10像素都是1px向目标位置移动 最后到达指定位置 var step = (target - ele.offsetLeft)/10; //差值大于10的时候向上取整 小于0的时候向下取整 step = step > 0 ? Math.ceil(step) : Math.floor(step) ele.style.left = ele.offsetLeft + step + "px"; //检测定时器是否停止 console.log(1) //跳出条件 目标位置-当前位置的绝对值，小于步长 if(Math.abs(target - ele.offsetLeft) < Math.abs(step)) { ele.style.left = target + "px"; clearInterval(ele.timer) } }, 30); } </script> </html>
以上就是对js缓动动画封装源码是什么？（代码实例）的全部介绍，如果您想了解更多有关JavaScript视频教程，请关注PHP中文网。
