快捷導(dǎo)航

使用JS實(shí)現(xiàn)側(cè)邊欄展開和關(guān)閉動(dòng)畫效果

更新時(shí)間：2026年01月19日 08:25:44 作者：vmiao

在很多電商的pc端網(wǎng)頁,我們往往能看到那個(gè)再熟悉不過的側(cè)邊欄,當(dāng)我們鼠標(biāo)放上去時(shí),它就會(huì)絲滑的彈出一個(gè)內(nèi)容的盒子,當(dāng)你離開,這個(gè)盒子又像彈簧一樣收縮回去本文我們就要用JS做出這個(gè)簡(jiǎn)單的動(dòng)畫效果,需要的朋友可以參考下

摘要

在很多電商的pc端網(wǎng)頁，我們往往能看到那個(gè)再熟悉不過的側(cè)邊欄。當(dāng)我們鼠標(biāo)放上去時(shí)，它就會(huì)絲滑的彈出一個(gè)內(nèi)容的盒子，當(dāng)你離開，這個(gè)盒子又像彈簧一樣收縮回去。接下來我們就要用JS做出這個(gè)簡(jiǎn)單的動(dòng)畫效果...

一、緩動(dòng)動(dòng)畫原理

注：以左右移動(dòng)效果為例

1.首先獲得盒子原始的位置（盒子要有定位，因?yàn)槭抢煤凶拥膌eft屬性移動(dòng)）
2.讓盒子在當(dāng)前位置上移動(dòng)一個(gè)距離
3.添加定時(shí)器setInterval()重復(fù)2中的操作
4.到達(dá)指定位置后清除定時(shí)器 clearInterval

二、代碼實(shí)現(xiàn)

1.首先準(zhǔn)備一個(gè)大盒子,包含一個(gè)span和一個(gè)用來滑動(dòng)的盒子

<div class = "slider_bar">
    <span>展開</span>
    <div class = "con">內(nèi)容</div>
</div>

2.為盒子設(shè)置樣式

.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;
}

因?yàn)閏ss的層疊性，要給.con設(shè)置z-index:-1,把滑動(dòng)盒子放在span下面隱藏起來

3.寫一個(gè)能夠?qū)崿F(xiàn)左右移動(dòng)動(dòng)畫函數(shù)

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 = '關(guān)閉';
     ) })  
    }
    sliderbar.addEventListener("mouseleave",function(){
      animate(con,0,function(){
          sliderbar.children[0].innerHTML = '展開';
     ) })  
    }
</script>

三、特別標(biāo)注

1.當(dāng)步長(step)為正數(shù)時(shí)，要向上取整(Math.ceil());為負(fù)數(shù)時(shí)，要向下取整(Math.floor())。 2.運(yùn)動(dòng)速度先快后慢，緩動(dòng)效果，用公式：（目標(biāo)位置-現(xiàn)在位置）/10. 3.回調(diào)函數(shù)做參數(shù)，callback就相當(dāng)于聲明的函數(shù)體，所以函數(shù)調(diào)用直接寫callback();

四、完整代碼示例

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>緩動(dòng)動(dòng)畫原理</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 = '關(guān)閉';
          });
      })
      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)
}

完整代碼示例的前面純手搓，沒在編輯器里面寫，如果有錯(cuò)誤希望掘友們幫我指出我再改正！

以上就是使用JS實(shí)現(xiàn)側(cè)邊欄展開和關(guān)閉動(dòng)畫效果的詳細(xì)內(nèi)容，更多關(guān)于JS側(cè)邊欄展開和關(guān)閉動(dòng)畫的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章: