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网页加载进度条的实现
Jun 01 jQuery
jquery.validate表单验证插件使用详解
Jun 21 jQuery
jQuery实现滚动效果
Nov 17 jQuery
jQuery实现所有验证通过方可提交的表单验证
Nov 21 jQuery
jquery中ajax请求后台数据成功后既不执行success也不执行error的完美解决方法
Dec 24 jQuery
[原创]jquery判断元素内容是否为空的方法
May 04 jQuery
Jquery实现无缝向上循环滚动列表的特效
Feb 13 jQuery
jQuery高级编程之js对象、json与ajax用法实例分析
Nov 01 jQuery
jquery实现简单自动轮播图效果
Jul 29 jQuery
jQuery实现鼠标拖拽登录框移动效果
Sep 13 jQuery
原生jQuery实现只显示年份下拉框
Dec 24 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
关于php操作mysql执行数据库查询的一些常用操作汇总
2013/06/24 PHP
PHP Curl出现403错误的解决办法
2014/05/29 PHP
php模拟post提交数据的方法
2015/02/12 PHP
smarty高级特性之对象的使用方法
2015/12/25 PHP
WordPress中给媒体文件添加分类和标签的PHP功能实现
2015/12/31 PHP
微信公众号支付之坑:调用支付jsapi缺少参数 timeStamp等错误解决方法
2016/01/12 PHP
PHP简单判断字符串是否包含另一个字符串的方法
2016/03/25 PHP
拥抱模块化的JavaScript
2012/03/07 Javascript
js控制当再次点击按钮时的间隔时间
2014/06/03 Javascript
基于jQuery的图片不完全按比例自动缩小
2014/07/11 Javascript
jQuery实现连续动画效果实例分析
2015/10/09 Javascript
jQuery的文档处理程序详解
2016/05/10 Javascript
JavaScript常用数学函数用法示例
2018/05/14 Javascript
React Component存在的几种形式详解
2018/11/06 Javascript
vue-cli脚手架引入弹出层layer插件的几种方法
2019/06/24 Javascript
jQuery单页面文字搜索插件jquery.fullsearch.js的使用方法
2020/02/04 jQuery
Python中生成器和yield语句的用法详解
2015/04/17 Python
Python批量创建迅雷任务及创建多个文件
2016/02/13 Python
python的dataframe和matrix的互换方法
2018/04/11 Python
Python内存读写操作示例
2018/07/18 Python
python数据结构之线性表的顺序存储结构
2018/09/28 Python
Python数据类型之Tuple元组实例详解
2019/05/08 Python
使用Python的datetime库处理时间(RPA流程)
2019/11/24 Python
tensorflow实现读取模型中保存的值 tf.train.NewCheckpointReader
2020/02/10 Python
matplotlib交互式数据光标实现(mplcursors)
2021/01/13 Python
HTML5表格_动力节点Java学院整理
2017/07/11 HTML / CSS
聪明的粉丝购买门票的地方:TickPick
2018/03/09 全球购物
食品安全检查制度
2014/02/03 职场文书
生物制药专业求职信
2014/03/11 职场文书
村支部书记群众路线对照检查材料思想汇报
2014/10/08 职场文书
领导班子整改措施
2014/10/24 职场文书
安全先进个人材料
2014/12/29 职场文书
给上级领导的感谢信
2015/01/22 职场文书
护理专业自荐信范文
2015/03/06 职场文书
闪闪的红星观后感
2015/06/08 职场文书
解决mysql模糊查询索引失效问题的几种方法
2021/06/18 MySQL