使用JS实现侧边栏展开和关闭动画效果

更新时间：2026年01月19日 08:25:44 作者：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侧边栏展开和关闭动画的资料请关注脚本之家其它相关文章！

您可能感兴趣的文章:

学习JavaScript图片预加载模块
这篇文章主要介绍了js实现图片预加载的方法，内容很详细，带领大家全面认识js图片预加载模块，感兴趣的小伙伴们可以参考一下
2016-11-11
JavaScript实现简单表单验证案例
这篇文章主要为大家详细介绍了JavaScript实现简单表单验证案例，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2022-08-08
js实现图片上传预览原理分析
这篇文章主要为大家详细介绍了js实现图片上传预览的原理，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2017-07-07
鼠标右击事件代码(asp.net后台)
本程序由一个js文件和aspx文件组成，没有后台CS代码。
2011-01-01
10个JavaScript代码使用技巧速览
这篇文章主要为大家整理了10个JavaScript代码使用技巧,文中的示例代码讲解详细,具有一定的借鉴价值,感兴趣的小伙伴可以跟随小编一起学习一下
2023-12-12
前端通过fetch模拟调用SSE接口的实现方案
SSE即Server-Sent Events,是一种服务器向浏览器推送数据的技术,并且不断地发送数据,保持连接打开,这篇文章主要介绍了前端通过fetch模拟调用SSE接口的实现方案,需要的朋友可以参考下
2025-09-09
详解jQuery插件开发方式
本文介绍了jQuery扩展、私有域、定义插件的基本步骤等知识，有需要的朋友可以看下
2016-11-11
JS实现添加缓动画的方法
这篇文章主要为大家详细介绍了JS实现添加缓动画的方法，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2022-07-07
zeroclipboard 单个复制按钮和多个复制按钮的实现方法
最近网站改版想让复制代码功能在多个浏览器上都可以实现，最近看网上不少说我们的代码复制功能不好用的，我们最近将会增加代码高亮等功能，希望大家多多支持我们
2014-06-06
JS常见疑难点分析之match，charAt，charCodeAt，map，search用法分析
这篇文章主要介绍了JS常见疑难点分析之match，charAt，charCodeAt，map，search用法,结合实例形式较为详细的分析了match，charAt，charCodeAt，map，search的功能,使用方法与相关注意事项,需要的朋友可以参考下
2016-12-12