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插件Echarts实现的渐变色柱状图
Mar 23 jQuery
详解如何在 vue 项目里正确地引用 jquery 和 jquery-ui的插件
Jun 01 jQuery
深入理解jquery的$.extend()、$.fn和$.fn.extend()
Jul 08 jQuery
利用jQuery+localStorage实现一个简易的计时器示例代码
Dec 25 jQuery
jQuery实现输入框的放大和缩小功能示例
Jul 21 jQuery
jQuery模拟12306城市选择框功能简单实现方法示例
Aug 13 jQuery
jQuery实现表格隔行换色
Sep 01 jQuery
js/jquery遍历对象和数组的方法分析【forEach,map与each方法】
Feb 27 jQuery
jQuery实现图片下载代码
Jul 18 jQuery
jQuery加PHP实现图片上传并提交的示例代码
Jul 16 jQuery
jquery实现穿梭框功能
Jan 19 jQuery
jQuery class属性操作addClass()与removeClass()、hasClass()、toggleClass()
Mar 31 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 htmlentities和htmlspecialchars 的区别
2008/08/18 PHP
理解php原理的opcodes(操作码)
2010/10/26 PHP
PHP取整函数:ceil,floor,round,intval的区别详细解析
2013/08/31 PHP
smarty模板局部缓存方法使用示例
2014/06/17 PHP
PHP magento后台无法登录问题解决方法
2016/11/24 PHP
PHP简单计算两个时间差的方法示例
2017/06/20 PHP
EXTjs4.0的store的findRecord的BUG演示代码
2013/06/08 Javascript
JavaScript中匿名函数用法实例
2015/03/23 Javascript
利用jQuery.Validate异步验证用户名是否存在(推荐)
2016/12/09 Javascript
浅谈jQuery中的$.extend方法来扩展JSON对象
2017/02/12 Javascript
纯js仿淘宝京东商品放大镜功能
2017/03/02 Javascript
使用jQuery.Pin垂直滚动时固定导航
2017/05/24 jQuery
jQuery表单设置值的方法
2017/06/30 jQuery
原生JS上传大文件显示进度条 php上传文件代码
2020/03/27 Javascript
Vue中的Props(不可变状态)
2018/09/29 Javascript
Vue中computed、methods与watch的区别总结
2019/04/10 Javascript
js实现多张图片每隔一秒切换一张图片
2019/07/29 Javascript
layer页面跳转,获取html子节点元素的值方法
2019/09/27 Javascript
JS常用排序方法实例代码解析
2020/03/03 Javascript
Vuex的热更替如何实现
2020/06/05 Javascript
python 不关闭控制台的实现方法
2011/10/23 Python
python之import机制详解
2014/07/03 Python
在Python的Django框架中显示对象子集的方法
2015/07/21 Python
Windows平台Python连接sqlite3数据库的方法分析
2017/07/12 Python
python检测主机的连通性并记录到文件的实例
2018/06/21 Python
如何用Python合并lmdb文件
2018/07/02 Python
Python datetime包函数简单介绍
2019/08/28 Python
Python实现网络聊天室的示例代码(支持多人聊天与私聊)
2021/01/27 Python
法国高保真音响和家庭影院商店:Son Video
2019/04/26 全球购物
Ibatis如何调用存储过程
2015/05/15 面试题
几道Java和数据库的面试题
2013/05/30 面试题
银行实习自我鉴定
2013/10/12 职场文书
商务助理岗位职责
2013/11/13 职场文书
开学典礼演讲稿
2014/05/23 职场文书
临床专业自荐信
2014/06/22 职场文书
奉献家乡演讲稿
2014/09/13 职场文书