js缓动动画封装源码是什么?(代码实例)
程序员文章站
2022-04-28 11:46:41
...
本篇文章给大家带来的内容是关于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中文网。
以上就是js缓动动画封装源码是什么?(代码实例)的详细内容,更多请关注其它相关文章!
推荐阅读
-
JS---封装缓动(变速)动画函数---增加任意一个属性
-
JS---封装缓动(变速)动画函数---增加多个任意多个属性
-
JS---封装缓动(变速)动画函数---增加任意多个属性&增加回调函数
-
JS---最终版本--封装缓动(变速)动画函数---增加任意多个属性&回调函数&层级&透明度
-
js缓动动画封装源码
-
JS---最终版本--封装缓动(变速)动画函数---增加任意多个属性&回调函数&层级&透明度
-
JS---封装缓动(变速)动画函数---增加多个任意多个属性
-
JS---封装缓动(变速)动画函数---增加任意多个属性&增加回调函数
-
JS---封装缓动(变速)动画函数---增加任意一个属性
-
js缓动动画封装源码