js缓动动画原理
Posted 做个机灵鬼
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了js缓动动画原理相关的知识,希望对你有一定的参考价值。
计算公式:(目标距离 - 已走距离) / 10
//给动画函数增加一个回调函数
function antimer(obj,distance,callback)
//避免多个元素拥有定时器时引起歧义 节省内存空间 var timer改成obj的一个属性
//在每次执行定时器函数的时,清除上一个定时器
clearInterval(obj.timer);
obj.timer = setInterval(function()
//设置缓动动画 公式:目标距离 - 现在的距离 / 10;
//给步长取整 当step大于0的时候向上取整,负数的时候向下取整
var step = (distance - obj.offsetLeft) / 10;
//判断数据正负,利用math方法进行取整,ceil向上取整
step = step > 0 ? Math.ceil(step) : Math.floor(step);
if(obj.offsetLeft == distance)
clearInterval(obj.timer);
//函数执行完的标记,再判断是否有回调函数
if(callback)
callback();
obj.style.left = obj.offsetLeft + step +'px';
,15)
封装成js文件,可以方便以后直接调用
例子
仿京东侧边栏 隐藏右滑栏
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*
margin: 0;
padding: 0;
.right
position: fixed;
right: 0;
top: 60%;
width: 50px;
height: 50px;
text-align: center;
line-height: 50px;
background-color: violet;
.son
//父盒子加了定位 子盒子定位不需加属性值
position: absolute;
left: 0;
top: 0;
width: 200px;
height: 50px;
line-height: 50px;
z-index: -1;
background-color: violet;
</style>
<script src="js/antimer.js"></script>
</head>
<body>
//注意点,把两个子盒子放进父盒子中
<div class="right">
<span>→</span>
<div class="son">联系客服</div>
</div>
<script>
var right = document.querySelector('.right');
var son = document.querySelector('.son');
//绑定一个鼠标经过事件 并且没有冒泡
right.addEventListener('mouseenter',function()
antimer(son,-150,function()
right.children[0].innerHTML = '←';
);
);
right.addEventListener('mouseleave',function()
antimer(son,0,function()
right.children[0].innerHTML = '→';
);
)
</script>
</body>
</html>
以上是关于js缓动动画原理的主要内容,如果未能解决你的问题,请参考以下文章