本篇文章给大家带来的内容是关于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视频教程，请关注。
以上就是js缓动动画封装源码是什么？（代码实例）的详细内容。