使用JS实现侧边栏展开和关闭动画效果
作者：vmiao
在很多电商的pc端网页,我们往往能看到那个再熟悉不过的侧边栏,当我们鼠标放上去时,它就会丝滑的弹出一个内容的盒子,当你离开,这个盒子又像弹簧一样收缩回去本文我们就要用JS做出这个简单的动画效果,需要的朋友可以参考下
摘要
在很多电商的pc端网页，我们往往能看到那个再熟悉不过的侧边栏。当我们鼠标放上去时，它就会丝滑的弹出一个内容的盒子，当你离开，这个盒子又像弹簧一样收缩回去。接下来我们就要用JS做出这个简单的动画效果...
一、缓动动画原理
注：以左右移动效果为例
1.首先获得盒子原始的位置 （盒子要有定位，因为是利用盒子的left属性移动）
2.让盒子在当前位置上移动一个距离
3.添加定时器setInterval()重复2中的操作
4.到达指定位置后清除定时器 clearInterval
二、代码实现
1.首先准备一个大盒子,包含一个span和一个用来滑动的盒子
<div class = "slider_bar">
<span>展开</span>
<div class = "con">内容</div>
</div>
2.为盒子设置样式
.slider_bar{
position:absolute;
right:0;
top:500px;
width:100px;
height:100px;
}
.span{
display:block;
width:100px;
height:100px;
background-color:pink;
}
.con{
position:absolute;
left:0;
top:0;
width:300px;
height:100px;
z-index:-1;
}
因为css的层叠性，要给.con设置z-index:-1,把滑动盒子放在span下面隐藏起来
3.写一个能够实现左右移动动画函数
function animate(obj,target,callback){
clearInterval(obj.timer);
obj.timer = setInterval(function(){
var step = (target - obj.offsetLeft)/10;
step = step > 0 ? Math.ceil(step) : Math.floor(step);
if(obj.offsetLeft == target){
clearInterval(obj.timer);
if(callback){
callback();
}
}
else{
obj.style.left = obj.offsetLeft + step + 'px';
}
},30)
}
4.绑定显示和隐藏事件
<script>
var sliderbar = document.querySelector(".slider_bar");
var con = document.querySelector(".con");
sliderbar.addEventListener("mouseenter",function(){
animate(con,-200,function(){
sliderbar.children[0].innerHTML = '关闭';
) })
}
sliderbar.addEventListener("mouseleave",function(){
animate(con,0,function(){
sliderbar.children[0].innerHTML = '展开';
) })
}
</script>
三、特别标注
1.当步长(step)为正数时，要向上取整(Math.ceil());为负数时，要向下取整(Math.floor())。 2.运动速度先快后慢，缓动效果，用公式：（目标位置-现在位置）/10. 3.回调函数做参数，callback就相当于声明的函数体，所以函数调用直接写callback();
四、完整代码示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>缓动动画原理</title>
<style>
.slider_bar {
right: 0;
top: 500px;
position: absolute;
width: 100px;
height: 100px;
}
span {
display: block;
width: 100px;
height: 100px;
background-color: pink;
}
.con {
position: absolute;
left: 0px;
top: 0px;
width: 300px;
height: 100px;
background-color: blueviolet;
z-index: -1;
}
</style>
<script src="/practice1/animate.js"></script>
</head>
<body>
<div class="slider_bar">
<span>展开</span>
<div class="con">问题反馈</div>
</div>
<script>
var sliderBar = document.querySelector(".slider_bar");
var con = document.querySelector(".con");
sliderBar.addEventListener("mouseenter", function () {
animate(con, -200, function () {
sliderBar.children[0].innerHTML = '关闭';
});
})
sliderBar.addEventListener("mouseleave", function () {
animate(con, 0, function () {
sliderBar.children[0].innerHTML = '展开';
});
})
</script>
</body>
</html>
JS文件
function animate(obj, target, callback) {
clearInterval(obj.timer);
obj.timer = setInterval(function () {
var step = (target - obj.offsetLeft) / 10;
step = step > 0 ? Math.ceil(step) : Math.floor(step);
if (obj.offsetLeft == target) {
clearInterval(obj.timer);
if (callback) {
callback();
}
}
else {
obj.style.left = obj.offsetLeft + step + 'px';
}
}, 30)
}
完整代码示例的前面纯手搓，没在编辑器里面写，如果有错误希望掘友们帮我指出我再改正！
以上就是使用JS实现侧边栏展开和关闭动画效果的详细内容，更多关于JS侧边栏展开和关闭动画的资料请关注脚本之家其它相关文章！