JavaScript实现滑动导航栏效果


Posted in Javascript onAugust 30, 2017

本文实例为大家分享了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实现滑动导航栏效果

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

JavaScript实现滑动导航栏效果

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript 原型继承
Dec 26 Javascript
javascript 基础篇2 数据类型,语句,函数
Mar 14 Javascript
jQuery实现随意改变div任意属性的名称和值(部分原生js实现)
May 28 Javascript
js判断页面中是否有指定控件的简单实例
Mar 04 Javascript
JQuery记住用户名和密码的具体实现
Apr 04 Javascript
Javascript递归打印Document层次关系实例分析
May 15 Javascript
Jquery 分页插件之Jquery Pagination
Aug 25 Javascript
JavaScript的instanceof运算符学习教程
Jun 08 Javascript
JS实现本地存储信息的方法(基于localStorage与userData)
Feb 18 Javascript
详解如何配置vue-cli3.0的vue.config.js
Aug 23 Javascript
vue 详情跳转至列表页实现列表页缓存
Mar 27 Javascript
详解vue中v-for的key唯一性
May 15 Vue.js
详解vue-cli 构建Vue项目遇到的坑
Aug 30 #Javascript
前端开发不得不知的10个最佳ES6特性
Aug 30 #Javascript
vue.js的手脚架vue-cli项目搭建的步骤
Aug 30 #Javascript
for循环 + setTimeout 结合一些示例(前端面试题)
Aug 30 #Javascript
详解使用nvm管理多版本node的方法
Aug 30 #Javascript
jquery插件开发之选项卡制作详解
Aug 30 #jQuery
浅谈angular.js跨域post解决方案
Aug 30 #Javascript
You might like
php XMLWriter类的简单示例代码(RSS输出)
2011/09/30 PHP
php实现用于删除整个目录的递归函数
2015/03/16 PHP
php redis实现对200w用户的即时推送
2017/03/04 PHP
PHP memcache在微信公众平台的应用方法示例
2017/09/13 PHP
效率高的Javscript字符串替换函数的benchmark
2008/08/02 Javascript
JQuery打造PHP的AJAX表单提交实例
2009/11/03 Javascript
常用js字符串判断方法整理
2013/10/18 Javascript
Jquery跳到页面指定位置的方法
2014/05/12 Javascript
javascript常用的正则表达式实例
2014/05/15 Javascript
使用JavaScript实现网页版Pongo设计思路及源代码分享
2014/06/16 Javascript
js操作XML文件的实现方法兼容IE与FireFox
2016/06/25 Javascript
jQuery插件echarts实现的多折线图效果示例【附demo源码下载】
2017/03/04 Javascript
JavaScript实现AOP详解(面向切面编程,装饰者模式)
2017/12/19 Javascript
vue2.0+vue-dplayer实现hls播放的示例
2018/03/02 Javascript
angular.js实现列表orderby排序的方法
2018/10/02 Javascript
使用xampp将angular项目运行在web服务器的教程
2019/09/16 Javascript
Vue左滑组件slider使用详解
2020/08/21 Javascript
浅析VUE防抖与节流
2020/11/24 Vue.js
python逆向入门教程
2018/01/15 Python
教你利用Python玩转histogram直方图的五种方法
2018/07/30 Python
python使用循环打印所有三位数水仙花数的实例
2018/11/13 Python
python可视化爬虫界面之天气查询
2019/07/03 Python
PyCharm2019安装教程及其使用(图文教程)
2019/09/29 Python
HTMl5的存储方式sessionStorage和localStorage详解
2014/03/18 HTML / CSS
美国复古街头服饰精品店:Need Supply Co.
2017/02/22 全球购物
日本酒店、民宿、温泉旅馆、当地旅行团中文预订:e路东瀛
2019/12/09 全球购物
应届生妇产科护士求职信
2013/10/27 职场文书
自荐信不宜过于夸大
2013/11/06 职场文书
经济与贸易专业应届生求职信
2013/11/19 职场文书
幼儿园庆六一活动方案
2014/03/06 职场文书
工程力学专业自荐信范文
2014/03/17 职场文书
《骑牛比赛》教后反思
2014/04/22 职场文书
英语课前三分钟演讲稿(6篇)
2014/09/13 职场文书
2014年小学美术工作总结
2014/12/20 职场文书
文艺部部长竞选稿
2015/11/21 职场文书
廉洁自律准则学习心得体会
2016/01/13 职场文书