js缓动动画封装源码是什么？（代码案例）
时间：2024/5/20作者：未知来源：争怎路由网人气：
- 网页的本质就是超级文本标记语言，通过结合使用其他的Web技术（如：脚本语言、公共网关接口、组件等），可以创造出功能强大的网页。因而，超级文本标记语言是万维网（Web）编程的基础，也就是说万维网是建立在超文本基础之上的。超级文本标记语言之所以称为超文本标记语言，是因为文本中包含了所谓“超级链接”点。本篇文章给大家带来的内容是关于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缓动动画封装源码是什么？（代码实例）的详细内容，更多请关注php中文网其它相关文章！
网站建设是一个广义的术语，涵盖了许多不同的技能和学科中所使用的生产和维护的网站。
关键词：js缓动动画封装源码是啥？（代码案例）