jQuery实现简单的滑动导航代码(移动端)

2024-03-27 17:09:51

1.1 App滑动导航

说明：这个例子主要是实现一条导航山只有两个选项的。

1.适合用于移动端。

2.滑动条的长度是选项内容的长度。

1.1.1. 效果图

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蓝色风格滑动导航栏代码分享

这是一款基于jQuery蓝色风格滑动导航栏特效源码,实现滑块跟随鼠标左右滑动,和一般的导航相比很有动感,是一段超酷的导航栏滑动代码. 使用方法: 1.依次引入 nicenav.css.jQuery脚本库以及 jquery.nicenav.js 文件: 2.复制代码到页面中即可. 3.可以在代码中的 $.nicenav( )括号中设置滑块的滑动速度. 源码下载地址为大家分享的jQuery蓝色风格滑动导航栏代码如下 <head> <style type="text/css&quo
jquery背景跟随鼠标滑动导航

本文实例讲述了支持背景图片上下滑动的竖向jQuery菜单导航特效代码,分享给大家供大家参考.具体如下: 运行效果截图如下: 具体代码如下 <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta charset="gb2312"> <title>左边跟随鼠标滑动导航</title> <meta name="keywords"
jQuery实现简单的滑动导航代码(移动端)

1.1 App滑动导航说明:这个例子主要是实现一条导航山只有两个选项的. 1.适合用于移动端. 2.滑动条的长度是选项内容的长度. 1.1.1. 效果图 1.1.2. Html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>滑动导航</title> </head> <body> <ul class="
jquery实现简单的二级导航下拉菜单效果

本文实例讲述了jquery实现简单的二级导航下拉菜单效果.分享给大家供大家参考.具体如下: jQuery代码实现的二级导航菜单效果,非常简洁,喜欢简洁风格的朋友您可以下载哦.菜单最多支持两级,CSS的配合也是挺重要的,不多说了,要代码的就直接复制吧. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-2jxl-menu-codes/ 具体代码如下: <title>jquery二级导航菜单</title> <styl
jQuery实现简单下拉导航效果

本文实例讲述了jQuery实现简单下拉导航效果.分享给大家供大家参考.具体如下: 这里粗略做一款基于jquery的下拉导航菜单效果,我觉得挺不错,虽然没有怎么美化,但是代码易懂,另外修补的空间也比较大,相信对学习CSS以及jquery的朋友有不小的帮助. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-xl-down-show-nav-codes/ 具体代码如下: <!DOCTYPE HTML> <html> <
jQuery实现的滑块滑动导航效果示例

本文实例讲述了jQuery实现的滑块滑动导航效果.分享给大家供大家参考,具体如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>www.jb51.net jquery滑动导航</title> <style> *{margin: 0;padding: 0;box-sizing: border
基于jQuery的简单的列表导航菜单

下面是我做的一个简单的导航菜单,因为是新手,难免有什么不对的地方,希望大家拍砖! 好了开始进入正题吧: 1.首先定义CSS样式表: 复制代码代码如下: <style type="text/css"> body{font-size:13px} ul,li{list-style-type:none;padding:0px;margin:0px} .menu{width:190px;border:solid 1px #E5D1A1;background-color:#FFFD
基于JQuery的简单实现折叠菜单代码

菜单为二级,初始化时为折叠效果,单击大项标题时展开,显示二级列表. HTML代码如下: 复制代码代码如下: <body> <div class="mainleftFAQ"> <div class="category"> <img src="images/admin.gif" width="215" height="66" /> </div> &l
基于Jquery的简单&简陋Tabs插件代码

HTML代码复制代码代码如下: <div class="tab"> <li class="selected" >1</li> <li class="hover">2</li> <li class="hover">3</li> </div> <div class="tab_box"> <div
Jquery实现简单的动画效果代码

复制代码代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title
jquery+css3实现熊猫tv导航代码分享

实现原理请看以下源代码 <div class="ph-nav" data-pdt-block="pheader-n"> <div class="ph-nav_shadow" style="left: 0px; width: 62px;"></div> <ul> <li class="ph-nav_item ph-nav_item--current"&g

jQuery实现简单的滑动导航代码(移动端)

相关推荐

随机推荐