封装缓动动画函数
Posted 乱舞春秋__
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了封装缓动动画函数相关的知识,希望对你有一定的参考价值。
在许多场景中,我们需要给元素添加缓动效果,比如轮播图等。
我们可以封装一个缓动动画函数,当我们需要给元素添加缓动效果时,直接调用夯实即可,可以提高开发效率。
函数封装如下:
function animate(obj, target, callback) {
clearInterval(obj.timer);
obj.timer = setInterval(function () {
if (obj.offsetLeft == target) {
clearInterval(obj.timer);
/* if (callback) {
callback();
}; */
callback && callback(); //判断是否执行回调函数
};
var step = (target - obj.offsetLeft) / 10; //每次移动的距离
step = step > 0 ? Math.ceil((target - obj.offsetLeft) / 10) : Math.floor((target - obj.offsetLeft) / 10);
obj.style.left = obj.offsetLeft + step + 'px';
}, 15);
};
参数解释如下:
obj:添加缓动效果的元素
target:目标位置
callback(可选):动画完成后执行的函数
值得一提的是,由于函数中使用了绝对定位,所以添加动画的元素需要设置绝对定位。
示例:
<!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>
<script src="animate.js"></script>
<style>
@font-face {
font-family: 'icomoon';
src: url('fonts/icomoon.eot?50hsza');
src: url('fonts/icomoon.eot?50hsza#iefix') format('embedded-opentype'),
url('fonts/icomoon.ttf?50hsza') format('truetype'),
url('fonts/icomoon.woff?50hsza') format('woff'),
url('fonts/icomoon.svg?50hsza#icomoon') format('svg');
font-weight: normal;
font-style: normal;
font-display: block;
}
.slidebar {
position: absolute;
right: 0;
top: 200px;
width: 34px;
height: 35px;
line-height: 35px;
background-color: rgb(247, 102, 6);
text-align: center;
}
.con {
position: absolute;
left: 0;
top: 0;
width: 62px;
height: 35px;
line-height: 30px;
background-color: rgb(247, 102, 6);
z-index: -1;
}
.shopCar {
font-family: 'icomoon';
}
</style>
</head>
<body>
<div class="slidebar">
<span class="shopCar"></span>
<div class="con">购物车</div>
</div>
<script>
var slidebar = document.querySelector('.slidebar');
var con = document.querySelector('.con');
slidebar.addEventListener('mouseenter', function () {
animate(con, -62);
})
slidebar.addEventListener('mouseleave', function () {
animate(con, 0);
})
</script>
</body>
</html>
效果图:
鼠标移至购物车上时,侧边栏会以动画的方式滑出。
以上是关于封装缓动动画函数的主要内容,如果未能解决你的问题,请参考以下文章