jQuery实现简单的滑动导航代码(移动端)


Posted in jQuery onMay 22, 2017

1.1 App滑动导航

说明:这个例子主要是实现一条导航山只有两个选项的。

1.适合用于移动端。

2.滑动条的长度是选项内容的长度。

1.1.1. 效果图 

jQuery实现简单的滑动导航代码(移动端)

1.1.2. Html

<!DOCTYPE html>
<html>
 <head>
 <meta charset="UTF-8">
 <title>滑动导航</title>
 </head>
 <body>
 <ul class="slid">
  <li><a href="#" rel="external nofollow" rel="external nofollow" >滑动到岗</a></li>
  <li><a href="#" rel="external nofollow" rel="external nofollow" >滑动到岗</a></li>
  <span id="navLine"></span>
 </ul>
 <script type="text/JavaScript" src="js/jQuery-1.9.1.min.js"></script>
 </body>
</html>

1.1.3. Css

<style type="text/css">
 body,div,p{ 
   margin:0; 
   padding:0; 
  }   
  ul.slid{
   display: block;   
   position:fixed;
   top: 10px; 
   left:0px; 
   right:0px;        
   height:60px;
   background: #f2f2f2;
   overflow: height;  
  }
  ul.slid li{
   display: inline-block;
   width: 49%;
   height: 40px;
   margin-top: 10px;
   float: left;
   text-align: center;
   overflow: hidden;
 
  }
   ul.slid li:first-child{
   border-right: 1px solid red;
   }
  ul.slid li a{
   display: inline-block;    
   width: 120px;       
   text-decoration:none; 
   height:37px;
   line-height: 37px; 
   color: #898989;   
   overflow: hidden;
  }
  ul.slid li a:hover{
   color: red;
  }
  #navLine{
   height:2px; 
   background-color:red; 
   position:absolute;    
   bottom:7px; 
   width:0px; 
   left:0px; 
   display:none; 
   overflow:hidden;
  }
 </style>

1.1.4. jQuery

<script type="text/javascript">
 $(function (){   
   navSlid();
  });
  //滑动导航
  var navSlid = function(){ 
   var nline = $('#navLine'); 
   var lia = $('ul.slid li a'); 
   //初始化滑块 
   nline.css({ 
    'width':lia.width(), 
    'left' :parseInt(lia.position().left) 
   }); 
   $('ul.slid li a').mouseenter(function(){ 
    //显示滑块 
    if(nline.css('display') == 'none'){ 
     nline.show(); 
    }; 
    //移动滑块 
    nline.stop().animate({ 
     width: $(this).width(), 
     left: parseInt($(this).position().left) 
    },300); 
   }); 
  }; 
 </script>
jQuery 相关文章推荐
jQuery源码解读之extend()与工具方法、实例方法详解
Mar 30 jQuery
jQuery树插件zTree使用方法详解
May 02 jQuery
Jquery把获取到的input值转换成json
May 15 jQuery
jQuery自定义多选下拉框效果
Jun 19 jQuery
jQuery回调方法使用示例
Jun 26 jQuery
简单实现jQuery轮播效果
Aug 18 jQuery
jquery 获取索引值在一定范围的列表方法
Jan 25 jQuery
jQuery实现鼠标点击处心形漂浮的炫酷效果示例
Apr 12 jQuery
Vue引入jquery实现平滑滚动到指定位置
May 09 jQuery
jQuery中each遍历的三种方法实例分析
Sep 07 jQuery
jQuery-App输入框实现实时搜索
Nov 19 jQuery
jquery实现穿梭框功能
Jan 19 jQuery
jQuery滑动到底部加载下一页数据的实例代码
May 22 #jQuery
jQuery表单验证之密码确认
May 22 #jQuery
JQuery 封装 Ajax 常用方法(推荐)
May 21 #jQuery
jQuery获取单选按钮radio选中值与去除所有radio选中状态的方法
May 20 #jQuery
关于jQuery库冲突的完美解决办法
May 20 #jQuery
jquery.guide.js新版上线操作向导镂空提示jQuery插件(推荐)
May 20 #jQuery
JS jQuery使用正则表达式去空字符的简单实现代码
May 20 #jQuery
You might like
thinkphp框架实现删除和批量删除
2016/06/29 PHP
通过event对象的fromElement属性解决热区设置主实体的一个bug
2008/12/22 Javascript
js 覆盖和重载 函数
2009/09/25 Javascript
JavaScript CSS修改学习第六章 拖拽
2010/02/19 Javascript
JavaScript高级程序设计 阅读笔记(四) ECMAScript中的类型转换
2012/02/27 Javascript
Node.js安装教程和NPM包管理器使用详解
2014/08/16 Javascript
jquery中one()方法的用法实例
2015/01/16 Javascript
jQuery插件EasyUI校验规则 validatebox验证框
2015/11/29 Javascript
JavaScript中最容易混淆的作用域、提升、闭包知识详解(推荐)
2016/09/05 Javascript
浅谈sass在vue注意的地方
2017/08/10 Javascript
Vue下路由History模式打包后页面空白的解决方法
2018/06/29 Javascript
Bootstrap标签页(Tab)插件切换echarts不显示问题的解决
2018/07/13 Javascript
基于Proxy的小程序状态管理实现
2019/06/14 Javascript
关于layui的动态图标不显示的解决方法
2019/09/04 Javascript
JavaScript RegExp 对象用法详解
2019/09/24 Javascript
VUE+node(express)实现前后端分离
2019/10/13 Javascript
javscript 数组扁平化的实现
2020/02/03 Javascript
JavaScript实现Tab标签页切换的最简便方式(4种)
2020/06/28 Javascript
python将html转成PDF的实现代码(包含中文)
2013/03/04 Python
Python中的ConfigParser模块使用详解
2015/05/04 Python
Swift 3.0在集合类数据结构上的一些新变化总结
2016/07/11 Python
Python中int()函数的用法浅析
2017/10/17 Python
python2和python3的输入和输出区别介绍
2018/11/20 Python
OpenCV 模板匹配
2019/07/10 Python
TensorFlow Saver:保存和读取模型参数.ckpt实例
2020/02/10 Python
使用Python操作MySQL的小技巧
2020/09/10 Python
python list等分并从等分的子集中随机选取一个数
2020/11/16 Python
德国运动鞋网上商店:Afew Store
2018/01/05 全球购物
Farfetch台湾官网:奢侈品牌时尚购物平台
2019/06/17 全球购物
英国水族馆和池塘用品购物网站:Warehouse Aquatics
2019/08/29 全球购物
金融专业个人的自我评价
2013/10/18 职场文书
高中毕业自我鉴定
2013/12/22 职场文书
保护环境倡议书300字
2014/05/19 职场文书
杨善洲观后感
2015/06/04 职场文书
CSS font-variation 可变字体的魅力(实例详解)
2022/03/03 HTML / CSS
SQL Server数据库查询出现阻塞之性能调优
2022/04/10 SQL Server