JavaScript实现滑动导航栏效果

更新时间：2017年08月30日 16:31:32 作者：sunshine-annie

这篇文章主要为大家详细介绍了JavaScript实现滑动导航栏效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

本文实例为大家分享了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>

导航栏可滑动

下拉点击会相应的改变导航栏

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

JS+DIV+CSS实现的经典标签切换效果代码
这篇文章主要介绍了JS+DIV+CSS实现的经典标签切换效果代码,涉及JavaScript基于鼠标事件针对页面元素动态变换的实现技巧,页面美观实用,需要的朋友可以参考下
2015-09-09
input file的默认value清空与赋值方法
出于安全性考虑，JS是不能直接设置File的value值的，下面是我总结出来的方法
2010-09-09
javascript时间函数基础介绍
这篇文章主要介绍了javascript中提供了Date对象来进行时间和日期的计算，这里简单的介绍下，方便需要的朋友
2013-03-03
js和jquery实现tab状态栏切换效果
这篇文章主要为大家详细介绍了js和jquery实现tab状态栏切换效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2021-08-08
JavaScript XML实现两级级联下拉列表
用xml作为存储容器，不用数据库，速度和效率高些。
2008-11-11
JS动态修改iframe内嵌网页地址的方法
这篇文章主要介绍了JS动态修改iframe内嵌网页地址的方法,涉及javascript动态修改iframe中src属性的技巧,具有一定参考借鉴价值,需要的朋友可以参考下
2015-04-04
javascript currying返回函数的函数
currying函数是一种返回函数的函数，是闭包最伟大的应用之一。有关闭包更详细的定义可参见这里与这里。如下currying函数的一种定义。
2009-11-11
JavaScript拖动层Div代码
本文主要介绍了JavaScript拖动层Div的代码实例。具有很好的参考价值，下面跟着小编一起来看下吧
2017-03-03
使用js原生实现年份轮播选择效果实例
这篇文章主要给大家介绍了关于如何使用js原生实现年份轮播选择效果的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2021-01-01
js判断在哪个浏览器打开项目的方法
这篇文章主要介绍了js判断在哪个浏览器打开项目的方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2020-01-01

JavaScript实现滑动导航栏效果

相关文章

最新评论

大家感兴趣的内容

最近更新的内容

常用在线小工具