介绍 & lt; ! doctype html>
& lt; html lang=癳n"祝辞
& lt; head>
& lt; meta charset=癠TF-8"祝辞
& lt; title>缓动动画& lt;/title>
& lt; style>
# slow_action {
宽度:100 px;
身高:100 px;
背景:,粉色;
位置:绝对的;
}
& lt;/style>
& lt;/head>
& lt; body>
& lt; button id=癰tn1"祝辞运动到400 & lt;/button>
& lt; button id=癰tn2"祝辞运动到0 & lt;/button>
& lt; p id=皊low_action"祝辞& lt;/p>
& lt;/body>
& lt; script>
var btn1 =, . getelementbyid (“btn1")
var btn2 =, . getelementbyid (“btn2")
var p =, . getelementbyid (“slow_action")/* *
*,动画原理,=,盒子位置,+,步长(步长越来越小)
,,,*,盒子位置,=,盒子本身的位置,+,(目标位置,安康;盒子本身位置)/10
*/时间=btn1.onclick function (), {
fn (p, 400)
}
时间=btn2.onclick function (), {
fn (p, 0)
}
function fn(避署,目标),{
clearInterval (ele.timer);
时间=ele.timer setInterval (function (), {//,var target =, 400;//最后10像素都是1 px向目标位置移动,最后到达指定位置
var step =, (target 作用;ele.offsetLeft)/10;//差值大于10的时候向上取整,小于0的时候向下取整
时间=step step 祝辞,0,?,Math.ceil(步骤),:,Math.floor(步骤)
+=ele.style.left ele.offsetLeft step +,“px";//检测定时器是否停止
console.log (1)//跳出条件,目标位置,当前位置的绝对值,小于步长
如果(Math.abs (target 作用;ele.offsetLeft), & lt;, Math.abs(步骤),{
+=ele.style.left target “px";
clearInterval (ele.timer)
}
},,30);
}
& lt;/script>
& lt;/html>
这篇文章主要介绍js缓动动画封装的示例分析,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!
主要用到offsetLeft, Math.ceil, Math.floor Math.abs。
注意offsetLeft获取到的的值为四舍五入的风格。剩下的数值,offsetLeft=Math.round (style.left的数值部分)比如风格。左=369.4 px,获取到的offsetLeft=369。
以上是“js缓动动画封装的示例分析”这篇文章的所有内容,感谢各位的阅读!希望分享的内容对大家有帮助,更多相关知识,欢迎关注行业资讯频道!
