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 DOM学习第四章 getElementByTagNames
Feb 19 Javascript
javascript将相对路径转绝对路径示例
Mar 14 Javascript
javascript中interval与setTimeOut的区别示例介绍
Mar 14 Javascript
jQuery toggleClass应用实例(附效果图)
Apr 06 Javascript
jQuery实现hover合成事件的方法
Aug 06 Javascript
jQuery超简单选项卡完整实例
Sep 26 Javascript
js 获取当前web应用的上下文路径实现方法
Aug 19 Javascript
微信小程序 wx.uploadFile无法上传解决办法
Dec 14 Javascript
js中split()方法得到的数组长度问题
Jul 19 Javascript
Vue2.0实现组件之间数据交互和通信操作示例
May 16 Javascript
JS字符串与二进制的相互转化实例代码详解
Jun 28 Javascript
详解JavaScript 中的批处理和缓存
Nov 19 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
兼容性最强的PHP生成缩略图的函数代码(修改版)
2011/01/18 PHP
利用PHP实现短域名互转
2013/07/05 PHP
php解析json数据实例
2014/08/19 PHP
PHP常用技术文之文件操作和目录操作总结
2014/09/27 PHP
php使用指定字符列表生成随机字符串的方法
2015/04/18 PHP
PHP查找数值数组中不重复最大和最小的10个数的方法
2015/04/20 PHP
几行代码轻松搞定jquery实现flash8类似的连接效果
2007/05/03 Javascript
js文件缓存之版本管理详解
2013/07/05 Javascript
原生js的弹出层且其内的窗口居中
2014/05/14 Javascript
javascript实现回到顶部特效
2015/05/06 Javascript
Jquery Easyui分割按钮组件SplitButton使用详解(17)
2016/12/18 Javascript
setTimeout函数的神奇使用
2017/02/26 Javascript
jQueryMobile之窗体长内容的缺陷与解决方法实例分析
2017/09/20 jQuery
利用node实现一个批量重命名文件的函数
2017/12/21 Javascript
Angular利用trackBy提升性能的方法
2018/01/26 Javascript
vue中使用cookies和crypto-js实现记住密码和加密的方法
2018/10/18 Javascript
在js代码拼接dom对象到页面上的模板总结
2018/10/21 Javascript
详解微信小程序实现跑马灯效果(附完整代码)
2019/04/29 Javascript
Vue中跨域及打包部署到nginx跨域设置方法
2019/08/26 Javascript
BootStrap表单验证中的非Submit类型按钮点击时触发验证的坑
2019/09/05 Javascript
vue之a-table中实现清空选中的数据
2019/11/07 Javascript
TypeScript 引用资源文件后提示找不到的异常处理技巧
2020/07/15 Javascript
[07:40]DOTA2每周TOP10 精彩击杀集锦vol.4
2014/06/25 DOTA
Python自定义一个类实现字典dict功能的方法
2019/01/19 Python
详解python中GPU版本的opencv常用方法介绍
2020/07/24 Python
在HTML5中使用MathML数学公式的简单讲解
2016/02/19 HTML / CSS
工程质量承诺书范文
2014/03/27 职场文书
优秀少先队辅导员先进事迹材料
2014/05/18 职场文书
企业文化标语大全
2014/06/10 职场文书
培训通知书模板
2015/04/17 职场文书
集结号观后感
2015/06/08 职场文书
五年级数学教学反思
2016/02/16 职场文书
研究生学习计划书应该怎么写?
2019/09/10 职场文书
CSS filter 有什么神奇用途
2021/05/25 HTML / CSS
解决vue $http的get和post请求跨域问题
2021/06/07 Vue.js
Python Pandas 删除列操作
2022/03/16 Python