计算公式:(目标距离 - 已走距离) / 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>