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 相关文章推荐
解决表单中第一个非隐藏的元素获得焦点的一个方案
Oct 26 Javascript
javascript控制swfObject应用介绍
Nov 29 Javascript
jquery中获取元素里某一特定子元素的代码
Dec 02 Javascript
60行js代码实现俄罗斯方块
Mar 31 Javascript
js实现网页多级级联菜单代码
Aug 20 Javascript
jQuery Mobile 和 Kendo UI 的比较
May 05 Javascript
JavaScript SHA512加密算法详细代码
Oct 06 Javascript
jquery中绑定事件的异同
Feb 28 Javascript
深入理解 JavaScript 中的 JSON
Apr 06 Javascript
详解Vue项目在其他电脑npm run dev运行报错的解决方法
Oct 29 Javascript
使用vue-cli脚手架工具搭建vue-webpack项目
Jan 14 Javascript
解决Nuxt使用axios跨域问题
Jul 06 Javascript
详解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
Apache2 httpd.conf 中文版
2006/12/06 PHP
fleaphp rolesNameField bug解决方法
2011/04/23 PHP
用PHP实现Ftp用户的在线管理
2012/02/16 PHP
PHP运行SVN命令显示某用户的文件更新记录的代码
2014/01/03 PHP
php实现的RSS生成类实例
2015/04/23 PHP
PHP连接sftp并下载文件的方法教程
2018/08/26 PHP
使用PHP开发留言板功能
2019/11/19 PHP
php+ajax实现文件切割上传功能示例
2020/03/03 PHP
JavaScript中的this关键字介绍与使用实例
2013/06/21 Javascript
什么是Node.js?Node.js详细介绍
2014/06/01 Javascript
JavaScript iframe数据共享接口实现方法
2016/01/06 Javascript
微信小程序 icon组件详细及实例代码
2016/10/25 Javascript
详解JS去重及字符串奇数位小写转大写
2016/12/29 Javascript
详解Vue路由开启keep-alive时的注意点
2017/06/20 Javascript
vue.js移动端app实战1:初始配置详解
2017/07/24 Javascript
vue项目国际化vue-i18n的安装使用教程
2018/03/14 Javascript
Vue中使用sass实现换肤功能
2018/09/07 Javascript
Vue实现类似Spring官网图片滑动效果方法
2019/03/01 Javascript
Node.JS枚举统计当前文件夹和子目录下所有代码文件行数
2019/08/23 Javascript
JS sort方法基于数组对象属性值排序
2020/07/10 Javascript
Python的Django框架中的URL配置与松耦合
2015/07/15 Python
手把手教你python实现SVM算法
2017/12/27 Python
tensorflow中next_batch的具体使用
2018/02/02 Python
Python微医挂号网医生数据抓取
2019/01/24 Python
Django REST Framework之频率限制的使用
2019/09/29 Python
python爬虫开发之Beautiful Soup模块从安装到详细使用方法与实例
2020/03/09 Python
python用opencv 图像傅里叶变换
2021/01/04 Python
广州一家公司的.NET面试题
2016/06/11 面试题
消防应急演练方案
2014/02/12 职场文书
初中军训感想300字
2014/03/05 职场文书
总经理任命书范本
2014/06/05 职场文书
简单租房协议书范本
2014/08/20 职场文书
湖南省党的群众路线教育实践活动总结会议新闻稿
2014/10/21 职场文书
2015年员工试用期工作总结
2014/12/12 职场文书
无违反计划生育证明格式
2015/06/24 职场文书
企业版Windows 11有哪些新功能? Win11适用于企业的功能介绍
2021/11/21 数码科技