<dd id="t699n"></dd>

  • <em id="t699n"></em>

    1. <dd id="t699n"></dd>

      導航劃塊滑動效果

      時間:2021-06-07 17:06:04 類型:JS/JQUERY
      字號:    

      導航下拉劃塊滑動效果, 隨著鼠標放到不同的導航, 下劃塊會跟著左右滑動

      1.jpg

      HTML代碼如下:

      <div id="nav">
                  <ul>
                      <li>
                          <a href="">財經</a>
                      </li> 
                      <li>
                          <a href="">娛樂</a>
                      </li>
                      <li>
                          <a href="">NBA</a>
                      </li>
                      <li>
                          <a href="">綜藝</a>
                      </li>
                      <span class="slider"></span>
                  </ul>
              </div>

      jquery代碼如下:

      $(function(){
              $("#nav>ul>li").hover(
                  function(){
                      let pos = $(this).position();
                          $(".slider").css({
                              'left' : pos.left + "px",
                          }).addClass("transform_slider");
                  },
                  function(event){
                      $(".slider").removeClass("transform_slider");
                  }
              );
          })

      CSS樣式如下:

      *{
          padding: 0; margin:0;
      }
      ul,ol,li{
          list-style: none;
      }
      a{
          text-decoration: none;
      }
      body{
          font-size: 14px;
          font-family: '微軟雅黑';
      }
      #nav{
          height: 44px;
          background-color: #0A0E11;
      }
      #nav>ul{
          width:500px;
          margin:0 auto;
          position: relative;
          height: 44px;
      }
      #nav>ul>li{
          width: 52px;
          height: 44px; line-height: 44px;
          float: left;
      }
      #nav>ul>li>a{
          color: #fff;
          display: block;
          height: 44px;
          text-align: center;
      }
      
      .slider{
          position: absolute;
          top:44px;
          left:0;
          width: 52px;
          height: 5px;
          background-color: #5FB878;
          transition:all .2s;
          -webkit-transition:all .2s;
          transform:scale(0,1);
          -ms-transform:scale(0,1);
          -webkit-transform:scale(0,1);
      }
      .transform_slider{
          
          transform:scale(1,1);
          -ms-transform:scale(1,1);
          -webkit-transform:scale(1,1);
      }


      黄网站免费 <