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实现百度登录框的动态切换效果
Apr 21 jQuery
使用jQuery,Angular实现登录界面验证码详解
Apr 27 jQuery
jQuery中的deferred对象和extend方法详解
May 08 jQuery
jQuery实现在HTML文档加载完毕后自动执行某个事件的方法
May 08 jQuery
jQuery 循环遍历改变a标签的href(实例讲解)
Jul 12 jQuery
jquery获取链接地址和跳转详解(推荐)
Aug 15 jQuery
关于JS与jQuery中的文档加载问题
Aug 22 jQuery
jquery之基本选择器practice(实例讲解)
Sep 30 jQuery
jQuery动态添加元素无法触发绑定事件的解决方法分析
Jan 02 jQuery
JS/jQuery实现DIV延时几秒后消失或显示的方法
Feb 12 jQuery
JQuery发送ajax请求时中文乱码问题解决
Nov 14 jQuery
jquery实现两个div中的元素相互拖动的方法分析
Apr 05 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
很温暖很温暖的Lester Young
2021/03/03 冲泡冲煮
PHP冒泡排序算法代码详细解读
2011/07/17 PHP
php中判断字符串是否全是中文或含有中文的实现代码
2011/09/16 PHP
ThinkPHP 5 AJAX跨域请求头设置实现过程解析
2020/10/28 PHP
Gambit vs ForZe BO3 第二场 2.13
2021/03/10 DOTA
让ie运行js时提示允许阻止内容运行的解决方法
2010/10/24 Javascript
JavaScript传递变量: 值传递?引用传递?
2011/02/22 Javascript
js正则表达式注册页面表单验证
2016/10/11 Javascript
angularjs实现的前端分页控件示例
2017/02/10 Javascript
js中Object.defineProperty()方法的不详解
2018/07/09 Javascript
微信小程序实现两边小中间大的轮播效果的示例代码
2018/12/07 Javascript
小程序多图列表实现性能优化的方法步骤
2019/05/28 Javascript
如何让微信小程序页面之间的通信不再变困难
2019/06/03 Javascript
python3 http提交json参数并获取返回值的方法
2018/12/19 Python
Python增强赋值和共享引用注意事项小结
2019/05/28 Python
pytorch打印网络结构的实例
2019/08/19 Python
Python配置文件处理的方法教程
2019/08/29 Python
复化梯形求积分实例——用Python进行数值计算
2019/11/20 Python
Django 博客实现简单的全文搜索的示例代码
2020/02/17 Python
Python日志syslog使用原理详解
2020/02/18 Python
在python中使用nohup命令说明
2020/04/16 Python
Grid 宫格常用布局的实现
2020/01/10 HTML / CSS
针对HTML5的Web Worker使用攻略
2015/07/12 HTML / CSS
recorder.js 基于Html5录音功能的实现
2020/05/26 HTML / CSS
Luxplus瑞典:香水和美容护理折扣
2018/01/28 全球购物
Notino芬兰:购买香水和化妆品
2019/04/15 全球购物
如何选择使用结构还是类
2014/05/30 面试题
《菜园里》教学反思
2014/04/17 职场文书
护理学专业求职信
2014/06/29 职场文书
大学生自荐信怎么写
2015/03/26 职场文书
2015年幼儿园中班下学期工作总结
2015/05/22 职场文书
导师鉴定意见
2015/06/05 职场文书
2016年教师师德师风心得体会
2016/01/12 职场文书
《刷子李》教学反思
2016/02/20 职场文书
手把手教你怎么用Python实现zip文件密码的破解
2021/05/27 Python
聊聊配置 Nginx 访问与错误日志的问题
2022/05/25 Servers