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 相关文章推荐
vue中如何引入jQuery和Bootstrap
Apr 10 jQuery
jquery中$.fn和图片滚动效果实现的必备知识总结
Apr 21 jQuery
jquery.uploadView 实现图片预览上传功能
Aug 10 jQuery
jQuery实现点击下拉框中的值累加到文本框中的方法示例
Oct 28 jQuery
jquery 获取索引值在一定范围的列表方法
Jan 25 jQuery
基于jquery实现左右上下移动效果
May 02 jQuery
jQuery+PHP实现上传裁剪图片
Jun 29 jQuery
jQuery实现适用于移动端的跑马灯抽奖特效示例
Jan 18 jQuery
jQuery选择器之基本选择器用法实例分析
Feb 19 jQuery
jQuery实时统计输入框字数及限制
Jun 24 jQuery
Jquery $.map使用方法实例详解
Sep 01 jQuery
jQuery实现二级导航菜单的示例
Sep 30 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使用ffmpeg给视频增加字幕显示的方法
2015/03/12 PHP
PHP使用pear自带的mail类库发邮件的方法
2015/07/08 PHP
详解PHP中的null合并运算符
2015/12/30 PHP
PHP数据库操作三:redis用法分析
2017/08/16 PHP
Windows平台PHP+IECapt实现网页批量截图并创建缩略图功能详解
2019/08/02 PHP
表单提交时自动复制内容到剪贴板的js代码
2007/03/16 Javascript
firefox浏览器下javascript 拖动层效果与原理分析代码
2007/12/04 Javascript
JS获取html对象的几种方式介绍
2013/12/05 Javascript
js判断字符长度及中英文数字等
2014/03/19 Javascript
BOOTSTRAP时间控件显示在模态框下面的bug修复
2015/02/05 Javascript
怎么通过onclick事件获取js函数返回值(代码少)
2015/07/28 Javascript
JavaScript实现的伸展收缩型菜单代码
2015/10/14 Javascript
jQuery div拖拽用法实例
2016/01/14 Javascript
微信小程序 video详解及简单实例
2017/01/16 Javascript
JavaScript控制浏览器全屏显示简单示例
2018/07/05 Javascript
详解nuxt路由鉴权(express模板)
2018/11/21 Javascript
vue v-for直接循环数字实例
2019/11/07 Javascript
Vue实现腾讯云点播视频上传功能的实现代码
2020/08/17 Javascript
浅谈vue在html中出现{{}}的原因及解决方式
2020/11/16 Javascript
[43:35]TI4 循环赛第二日Liquid vs Fnatic
2014/07/11 DOTA
Python+django实现文件上传
2016/01/17 Python
Python编程实现的图片识别功能示例
2017/08/03 Python
如何通过雪花算法用Python实现一个简单的发号器
2019/07/03 Python
使用python制作一个解压缩软件
2019/11/13 Python
如何利用pycharm进行代码更新比较
2020/11/04 Python
详解Css3新特性应用之过渡与动画
2017/01/10 HTML / CSS
美国浴缸、水槽和水龙头购物网站:Vintage Tub & Bath
2019/11/05 全球购物
企业文化标语大全
2014/06/10 职场文书
医院义诊活动总结
2014/07/04 职场文书
初中生300字旷课检讨书
2014/11/19 职场文书
2015年法制宣传月活动总结
2015/03/26 职场文书
课程设计感想范文
2015/08/11 职场文书
2016国庆节67周年红领巾广播稿
2015/12/18 职场文书
python之django路由和视图案例教程
2021/07/26 Python
微软Win11什么功能最惊艳? Windows11新功能特性汇总
2021/11/21 数码科技
CSS 鼠标点击拖拽效果的实现代码
2022/12/24 HTML / CSS