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实现简单漂亮的Nav导航菜单效果
Mar 29 jQuery
QRCode.js:基于JQuery的生成二维码JS库的使用
Jun 23 jQuery
详解在vue-cli中引用jQuery、bootstrap以及使用sass、less编写css
Nov 08 jQuery
jQuery实现动态控制页面元素的方法分析
Dec 20 jQuery
jquery动态添加带有样式的HTML标签元素方法
Feb 24 jQuery
jQuery实现文字超过1行、2行或规定的行数时自动加省略号的方法
Mar 28 jQuery
20个最常见的jQuery面试问题及答案
May 23 jQuery
jquery.onoff实现简单的开关按钮功能(推荐)
May 24 jQuery
Angular5中调用第三方库及jQuery的添加的方法
Jun 07 jQuery
jQuery时间戳和日期相互转换操作示例
Dec 07 jQuery
jQuery实现的隔行变色功能【案例】
Feb 18 jQuery
JQuery基于FormData异步提交数据文件
Sep 01 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
短波的认识
2021/03/01 无线电
php+javascript的日历控件
2009/11/19 PHP
php递归实现无限分类生成下拉列表的函数
2010/08/08 PHP
ThinkPHP3.0略缩图不能保存到子目录的解决方法
2012/09/30 PHP
php中jpgraph类库的使用介绍
2013/08/08 PHP
PHP获取文件扩展名的常用方法小结【五种方式】
2018/04/27 PHP
JS中的prototype与面向对象的实例讲解
2013/05/22 Javascript
java与javascript之间json格式数据互转介绍
2013/10/29 Javascript
JavaScript中for..in循环陷阱介绍
2013/11/12 Javascript
javascript实现动态标签云
2015/10/16 Javascript
利用AngularJs实现京东首页轮播图效果
2016/09/08 Javascript
Angular2中Bootstrap界面库ng-bootstrap详解
2016/10/18 Javascript
浅析如何利用angular结合translate为项目实现国际化
2016/12/08 Javascript
Node.js中用D3.js的方法示例
2017/01/16 Javascript
JS实现直接运行html代码的方法
2017/03/13 Javascript
vue2.0中goods选购栏滚动算法的实现代码
2017/05/17 Javascript
react的滑动图片验证码组件的示例代码
2019/02/27 Javascript
vue 中 命名视图的用法实例详解
2019/08/14 Javascript
Vue-cli4 配置 element-ui 按需引入操作
2020/09/11 Javascript
[32:30]夜魇凡尔赛茶话会 第一期01:谁是卧底
2021/03/11 DOTA
Python设计模式编程中Adapter适配器模式的使用实例
2016/03/02 Python
python爬虫入门教程--HTML文本的解析库BeautifulSoup(四)
2017/05/25 Python
python3+mysql查询数据并通过邮件群发excel附件
2018/02/24 Python
用python简单实现mysql数据同步到ElasticSearch的教程
2018/05/30 Python
Python3.5常见内置方法参数用法实例详解
2019/04/29 Python
python代码实现逻辑回归logistic原理
2019/08/07 Python
Python flask框架实现浏览器点击自定义跳转页面
2020/06/04 Python
浅谈Keras的Sequential与PyTorch的Sequential的区别
2020/06/17 Python
带有css3动画效果的兼容多浏览器简单导航条示例
2014/01/26 HTML / CSS
MYSQL基础面试题
2012/05/13 面试题
大学活动策划书范文
2014/01/10 职场文书
2014年信息中心工作总结
2014/12/17 职场文书
承德避暑山庄导游词
2015/02/03 职场文书
团组织关系介绍信
2019/06/24 职场文书
原来实习报告是这样写的呀!
2019/07/03 职场文书
基于Python和openCV实现图像的全景拼接详细步骤
2021/10/05 Python