jquery动态导航插件dynamicNav用法实例分析


Posted in Javascript onSeptember 06, 2015

本文实例讲述了jquery动态导航插件dynamicNav用法。分享给大家供大家参考。具体如下:

这是一款自己写的jquery动态导航插件—dynamicNav,具体思路是:

第一、给所有的li里插入一个span标签,且包含li里面的a标签
第二、复制一份a标签,插入到span里,现在span里有两个a标签
第三、根据传入的参数判断是垂直切换还是水平的,如果是垂直的,将span的宽度改为一个a标签的宽度,这时两个a标签就垂直排列了,这里一定要将li的overflow:hidden;否则会看到2个a标签。如果是水平的,将span的宽度改为2个a标签的宽度,且将li的宽度改为一个a标签的宽度,因为我没有在css中设置li的宽度,它是随a标签的宽度而改变,如果你像将所有导航菜单的宽度设为一样宽,可以在css中给li加上width属性。
第四、就是开始制作动画效果,使用hover事件,处理鼠标经过和离开时的效果。

使用jquery的animate改变span的margin-top(垂直方向)和margin-left(水平方向)就可以了。

运行效果截图如下:

jquery动态导航插件dynamicNav用法实例分析

在线演示地址如下:

具体代码如下:

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>动态导航插件</title>
<style type="text/css">
<!--
body, td, th {
 font-size: 14px;
 background-color:#FFF
}
h1{border-bottom:1px solid #999; margin:50px 60px;}
/*导航默认样式,可根据实际情况修改*/
* {
 margin:0;
 padding:0
}
.nav {
 width:980px;
 height:30px;
 left:50%;
 margin-left:-490px;
 list-style:none;
 position:relative;
}
.nav li {
 display:inline-block;
 margin:0 3px;
 position:relative;
 overflow:hidden;
 height:30px; /*建议此高度大于等于里面的a标签高度*/
 float:left;
}
.nav li span {
 display:inline-block;
 overflow:hidden
}
.nav li a {
 text-decoration:none;
 outline:none;
 color:#666;
 display:inline-block;
 padding:0 10px; 
 text-align:center;
 background-color: #E1E1E1;
 font-weight:bold;
 height:30px;
 line-height:30px;
}
/*鼠标经过时样式*/
.nav li a.over {
 background-color:#666;
 color:#FFF
}
-->
</style>
<script type=text/javascript src="jquery-1.6.2.min.js"></script>
<script type="text/javascript">
(function($){
  $.fn.dynamicNav=function(options){
  //默认配置
   var defaults = {
   direction:"up", //动画切换方向,总共4种up 、down 、left 、right
   duration:100 //三种预定速度之一的字符串("slow", "normal", or "fast")或表示动画时长的毫秒数值(如:1000)
   }; 
 // 覆盖默认配置
  var opts = $.extend(defaults, options);
  this.each(function(){
   var navList=$(this).find("li"),
   navLink=navList.find("a");
   //在a标签外侧插入span
   navList.wrapInner("<span></span>");
   var span=navLink.parent();
   //判断是否垂直切换
   if(opts.direction=="up" || opts.direction=="down"){
    var v=true;
     }
   //判断是否改变span初始位置及a样式 
   if(opts.direction=="right" || opts.direction=="down"){
    var restSpan=true;
     }
    navLink.each(function(){
    //获取a高度和宽度
    var w=$(this).outerWidth(),
    p=$(this).parent();
    //初始复制现有a标签 
    $(this).clone().appendTo(p).addClass("over");
    //如果是垂直切换
    if(v){ 
     p.css("width",w);   
     }else{
     p.css("width",2*w).parent().css("width",w); 
     }
     });
   //如果向右或向下切换,改变span初始位置及a样式
   if(restSpan){
   span.each(function(){
     if(opts.direction=="right"){
     $(this).css({"margin-left":-$(this).outerWidth()/2});
     }
    if(opts.direction=="down"){
     $(this).css({"margin-top" : -$(this).outerHeight()/2});
     }
    $(this)
    .find('a')
    .last()
    .removeClass("over")
    .prev()
    .addClass("over");
    });
     }
   //鼠标经过时动画函数
   function over(o){
    o.animate(v?{"margin-top": -o.outerHeight()/2}:{"margin-left": -o.outerWidth()/2}, opts.duration);
     }
   //鼠标移开时动画函数
   function out(o){
    o.animate(v?{"margin-top":0}:{"margin-left": 0}, opts.duration);
     }
   //鼠标经过和离开 
   span.hover(function(){
     restSpan ? out($(this)) : over($(this));
      },function(){
      restSpan ? over($(this)) : out($(this));
      });
   });
  };
 })(jQuery);
 $(function(){
  //向左 
  $("#nav1").dynamicNav({
    direction:"left", //动画切换方向,总共4种up 、down 、left 、right
    duration:300 //三种预定速度之一的字符串("slow", "normal", or "fast")或表示动画时长的毫秒数值(如:1000)
    });
  //向右 
  $("#nav2").dynamicNav({
    direction:"right", 
    duration:200 
    });
  //向上
  $("#nav3").dynamicNav({
    direction:"up", 
    duration:100 
    });
  //向下 
  $("#nav4").dynamicNav({
    direction:"down",
    duration:400
    });
  });
</script>
</head>
<body>
<h1>向左(速度300毫秒)</h1>
<ul class="nav" id="nav1">
 <li><a href="#">首页</a></li>
 <li><a href="#">前端技术</a></li>
 <li><a href="#">视觉设计</a></li>
 <li><a href="#">文章归档</a></li>
 <li><a href="#">工具/书籍</a></li>
 <li><a href="#">关于我</a></li>
</ul>
<h1>向右(速度200毫秒)</h1>
<ul class="nav" id="nav2">
 <li><a href="#">首页</a></li>
 <li><a href="#">前端技术</a></li>
 <li><a href="#">视觉设计</a></li>
 <li><a href="#">文章归档</a></li>
 <li><a href="#">工具/书籍</a></li>
 <li><a href="#">关于我</a></li>
</ul>
<h1>向上(速度100毫秒)</h1>
<ul class="nav" id="nav3">
 <li><a href="#">首页</a></li>
 <li><a href="#">前端技术</a></li>
 <li><a href="#">视觉设计</a></li>
 <li><a href="#">文章归档</a></li>
 <li><a href="#">工具/书籍</a></li>
 <li><a href="#">关于我</a></li>
</ul>
<h1>向下(速度400毫秒)</h1>
<ul class="nav" id="nav4">
 <li><a href="#">首页</a></li>
 <li><a href="#">前端技术</a></li>
 <li><a href="#">视觉设计</a></li>
 <li><a href="#">文章归档</a></li>
 <li><a href="#">工具/书籍</a></li>
 <li><a href="#">关于我</a></li>
</ul>
</body>
</html>

希望本文所述对大家的jquery程序设计有所帮助。

Javascript 相关文章推荐
获取URL地址中的文件名和参数的javascript代码
Sep 02 Javascript
js中replace的用法总结
Dec 27 Javascript
jQuery+css实现百度百科的页面导航效果
Dec 16 Javascript
浅谈JavaScript中的字符编码转换问题
Jul 07 Javascript
js 倒计时(高效率服务器时间同步)
Sep 12 Javascript
小程序tab页无法传递参数的方法
Aug 03 Javascript
vue-router 实现导航守卫(路由卫士)的实例代码
Sep 02 Javascript
vue router 通过路由来实现切换头部标题功能
Apr 24 Javascript
vue cli3.0 引入eslint 结合vscode使用
May 27 Javascript
深入学习JavaScript 高阶函数
Jun 11 Javascript
微信小程序全局变量的设置、使用、修改过程解析
Sep 24 Javascript
js实现购物车商品数量加减
Sep 21 Javascript
jquery实现可自动收缩的TAB网页选项卡代码
Sep 06 #Javascript
jquery实现初次打开有动画效果的网页TAB切换代码
Sep 06 #Javascript
js实现简洁的TAB滑动门效果代码
Sep 06 #Javascript
js实现左侧网页tab滑动门效果代码
Sep 06 #Javascript
浅谈javascript函数式编程
Sep 06 #Javascript
JS简单实现多级Select联动菜单效果代码
Sep 06 #Javascript
Javascript实现快速排序(Quicksort)的算法详解
Sep 06 #Javascript
You might like
关于WordPress的SEO优化相关的一些PHP页面脚本技巧
2015/12/10 PHP
给大家分享几个常用的PHP函数
2017/01/15 PHP
PHP命名空间namespace及use的简单用法分析
2018/08/03 PHP
php常用字符串长度函数strlen()与mb_strlen()用法实例分析
2019/06/25 PHP
Gambit vs ForZe BO3 第一场 2.13
2021/03/10 DOTA
用javascript实现给出的盒子的序列是否可连为一矩型
2007/08/30 Javascript
JQuery 小练习(实例代码)
2009/08/07 Javascript
基于jquery的textarea发布框限制文字字数输入(添加中文识别)
2012/02/16 Javascript
js触发asp.net的Button的Onclick事件应用
2013/02/02 Javascript
jquery1.10给新增元素绑定事件的方法
2014/03/06 Javascript
JS实现根据当前文字选择返回被选中的文字
2014/05/21 Javascript
DOM事件探秘篇
2017/02/15 Javascript
canvas实现爱心和彩虹雨效果
2017/03/09 Javascript
详解cordova打包成webapp的方法
2017/10/18 Javascript
百度地图去掉marker覆盖物或者去掉maker的label文字方法
2018/01/26 Javascript
讲解vue-router之什么是嵌套路由
2018/05/28 Javascript
vue微信分享到朋友圈 vue微信发送给好友
2018/11/28 Javascript
详解Angular Karma测试的持续集成实践
2019/11/15 Javascript
Node.js API详解之 Error模块用法实例分析
2020/05/14 Javascript
利用Python脚本生成sitemap.xml的实现方法
2017/01/31 Python
使用python itchat包爬取微信好友头像形成矩形头像集的方法
2019/02/21 Python
python检测服务器端口代码实例
2019/08/31 Python
浅谈Python type的使用
2019/11/19 Python
pytorch中tensor.expand()和tensor.expand_as()函数详解
2019/12/27 Python
python3+openCV 获取图片中文本区域的最小外接矩形实例
2020/06/02 Python
Pycharm Available Package无法显示/安装包的问题Error Loading Package List解决
2020/09/18 Python
Michael Kors美国官网:美式奢侈生活风格的代表
2016/11/25 全球购物
Roxy荷兰官方网站:冲浪、滑雪板、服装和配件
2019/10/22 全球购物
生产总经理岗位职责
2013/12/19 职场文书
青春励志演讲稿范文
2014/08/25 职场文书
2014年化工厂工作总结
2014/11/25 职场文书
2015年行风建设工作总结
2015/05/15 职场文书
交通处罚决定书
2015/06/24 职场文书
思想工作总结范文
2015/08/12 职场文书
python自动计算图像数据集的RGB均值
2021/06/18 Python
JS前端轻量fabric.js系列之画布初始化
2022/08/05 Javascript