JavaScript实现滑动导航栏效果

程序员文章站 2022-04-29 08:32:51

本文实例为大家分享了js实现滑动导航栏效果的具体代码，供大家参考，具体内容如下 &l...

本文实例为大家分享了js实现滑动导航栏效果的具体代码，供大家参考，具体内容如下

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1.0 ,user-scalable=no"> 
    
    <script src="node_modules/jquery/jquery.js"></script>
    <style>
      *{
        margin: 0;
        padding: 0;
      }
      .navscroll{
        position: relative;
      }
      #overflow{      
        width: 100%;
        height: 30px;
        overflow-x: scroll;
      }  
      #overflow .container{
        height: 30px;
      }
      #overflow .container div{
        float: left;
        width: 100px;
        height: 30px;
        line-height: 30px;
        text-align: center;
      }
      #overflow::-webkit-scrollbar {
        display: none;
        -webkit-overflow-scrolling: touch;
      }  
      .navscroll .drop_down{
        position: absolute;
        top: 0;
        right: 0;
        width: 50px;
        height: 30px;
      }
      .navscroll .drop_down img{
        width: 100%;
        height: 100%;
      }
      .tabul.clearfix{
        display: none; 
        width: 100%;
        list-style: none;
        z-index: 10;
        background: rgba(0,0,0,.1);
      }
      .tabul li{
        float: left;
        width: 6.25rem;
        height: 2.65625rem;
        line-height: 2.65625rem;;
        text-align: center;
      }
      .clearfix{
        content: "";
        display: table;
        clear: both;
      }
      div, ul{
        color: #89cfe8;
      }
      
      #overflow .container div.lastwidth{
        width: 50px;
      }
      .red{
        color: #ff9933;
      }
    </style>
  </head>
  <body>
    <div class="navscroll">
      <div id="overflow"> 
        <div class="container"> 
          <div class="tabitem red">
            item1 
          </div> 
          <div class="tabitem">
            item2
          </div> 
          <div class="tabitem">
            item3 
          </div> 
          <div class="tabitem">
            item4
          </div> 
          <div class="tabitem">
            item5 
          </div> 
          <div class="tabitem">
            item6
          </div> 
          <div class="tabitem">
            item7 
          </div> 
          <div class="tabitem">
            item8
          </div> 
          <div class="tabitem">
            item9
          </div> 
          <div class="tabitem">
            item10 
          </div> 
          <div class="tabitem">
            item11 
          </div> 
          <div class="lastwidth"></div>
        </div> 
      </div> 
      <div class="drop_down">
        <img src="img/icon_events_fold.png" drop="down" alt="" />
      </div>
      <ul class="tabul clearfix">
        <li class="red">item1</li>
        <li >item2</li>
        <li >item3</li>
        <li >item4</li>
        <li >item5</li>
        <li >item6</li>
        <li >item7</li>
        <li >item8</li>
        <li >item9</li>
        <li >item10</li>
        <li >item11</li>
        
      </ul>
    </div>
  </body>
  <script>
    var width = 0;
    $('#overflow .container div').each(function () { 
      width += $(this).outerwidth(true); 
    }); 
    $('#overflow .container').css('width', width + "px"); 
    var flag = true;
    $(".drop_down img").click(function(e){ //箭头符号的变化
      if(flag){
        $(".drop_down img").attr("src","img/icon_events_unfold.png");
        $(".tabul").css("display","block")
        flag = false; 
      }else{
        $(".drop_down img").attr("src","img/icon_events_fold.png");
        $(".tabul").css("display","none")
        flag = true;
      }
    });
    var ulheight= math.ceil(($(".tabul li").length-1)/6)*2.65625 +"rem";
    $(".navscroll .tabul").css("height",ulheight)
    $(".navscroll").on("click",".tabitem",function(e,index){ //滑动栏点击样式      
      var $this=$(this);
      $(".tabitem").css({"color": "#89cfe8"})
      $($this).css({"color": "#ff9933"});
      var items = $($this)[0];
      var ulindx;
      $(".tabitem").each(function(i,n){
        if(n==items){
          ulindx = i;
        }
      })  
      $(".tabul li").css({"color": "#89cfe8"});
      var ulitems = $(".tabul li")[ulindx];
      $(ulitems).css({"color": "#ff9933"});
      movenav(ulindx);
    })    
    $(".navscroll").on("click","li",function(e,index){ //下拉点击样式      
      var $this=$(this);
      $("li").css({"color": "#89cfe8"})
      $($this).css({"color": "#ff9933"});
      var items = $($this)[0];
      var ulindx;
      $("li").each(function(i,n){
        if(n==items){
          ulindx = i;
        }
      })  
      $(".tabitem").css({"color": "#89cfe8"});
      var ulitems = $(".tabitem")[ulindx];
      $(ulitems).css({"color": "#ff9933"});
      $(".drop_down img").attr("src","img/icon_events_fold.png");
      $(".tabul").css("display","none")
      flag = true;
      movenav(ulindx);
    })  
    function movenav(index){ //滑动栏移动效果
      var allimg = $(".navscroll").find(".tabitem");
      var navimgwidth = allimg.width();
      var lastwidth = $(".container .lastwidth").width();
      var windowwidth = $(window).width();
      var navbox = $("#overflow");
      if(navimgwidth*(index+1) >=windowwidth-navimgwidth){
        if(navimgwidth*(index+1)<navimgwidth*(allimg.length-1)+lastwidth-windowwidth){
          navbox.animate({scrollleft:navimgwidth*(index+1)},500);
        }else{
          navbox.animate({scrollleft:navimgwidth*(allimg.length)+lastwidth-windowwidth},500);
        }
      }else{
        navbox.animate({scrollleft:'0px'},1000);
      }
    }
  </script>
</html>

导航栏可滑动

JavaScript实现滑动导航栏效果