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 相关文章推荐
用jQuery打造TabPanel效果代码
May 22 Javascript
javascript实现阻止iOS APP中的链接打开Safari浏览器
Jun 12 Javascript
JQuery调用绑定click事件的3种写法
Mar 28 Javascript
浅谈javascript函数式编程
Sep 06 Javascript
基于BootStrap实现局部刷新分页实例代码
Aug 08 Javascript
jQuery中checkbox反复调用attr('checked', true/false)只有第一次生效的解决方法
Nov 16 Javascript
走进javascript——不起眼的基础,值和分号
Feb 24 Javascript
js+html5实现半透明遮罩层弹框效果
Aug 24 Javascript
jquery获取transform里的值实现方法
Dec 12 jQuery
Angular4 组件通讯方法大全(推荐)
Jul 12 Javascript
详解Vue的ref特性的使用
Jan 24 Javascript
javascript实现计算器功能详解流程
Nov 01 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
php用正则表达式匹配URL的简单方法
2013/11/12 PHP
yii2局部关闭(开启)csrf的验证的实例代码
2017/07/10 PHP
PHP实现的Redis多库选择功能单例类
2017/07/27 PHP
(推荐一个超好的JS函数库)S.Sams Lifexperience ScriptClassLib
2007/04/29 Javascript
JavaScript 构造函数 面相对象学习必备知识
2010/06/09 Javascript
原生js和jQuery随意改变div属性style的名称和值
2014/10/22 Javascript
JS处理json日期格式化问题
2015/10/01 Javascript
js获取鼠标点击的对象,点击另一个按钮删除该对象的实现代码
2016/05/13 Javascript
js设置和获取自定义属性的方法
2016/10/20 Javascript
node安装--linux下的快速安装教程
2017/03/21 Javascript
js实现加载页面就自动触发超链接的示例
2017/08/31 Javascript
微信小程序实现点击按钮修改字体颜色功能【附demo源码下载】
2017/12/05 Javascript
Angular利用trackBy提升性能的方法
2018/01/26 Javascript
微信小程序自定义tabbar custom-tab-bar 6s出不来解决方案(cover-view不兼容)
2019/11/01 Javascript
JS实现电脑虚拟键盘打字测试
2020/06/24 Javascript
Python fileinput模块使用实例
2015/05/28 Python
Python使用ftplib实现简易FTP客户端的方法
2015/06/03 Python
tensorflow 获取模型所有参数总和数量的方法
2018/06/14 Python
在python 不同时区之间的差值与转换方法
2019/01/14 Python
OpenCV-Python 摄像头实时检测人脸代码实例
2019/04/30 Python
Python print不能立即打印的解决方式
2020/02/19 Python
如何解决cmd运行python提示不是内部命令
2020/07/01 Python
浅析Python中字符串的intern机制
2020/10/03 Python
详解Python爬虫爬取博客园问题列表所有的问题
2021/01/18 Python
中粮集团旗下食品网上购物网站:我买网
2016/09/22 全球购物
Athleta官网:购买女士瑜伽服、技术运动服和休闲运动服
2020/11/12 全球购物
SQL Server 2000数据库的文件有哪些,分别进行描述
2013/03/30 面试题
室内设计专业个人的自我评价
2013/10/19 职场文书
写好求职信第一句话的技巧
2013/10/26 职场文书
教学改革实施方案
2014/03/31 职场文书
门市房租房协议书
2014/12/04 职场文书
2015年幼儿园卫生保健工作总结
2015/05/12 职场文书
活动费用申请报告
2015/05/15 职场文书
HTML中table表格拆分合并(colspan、rowspan)
2021/04/07 HTML / CSS
Python 批量下载阴阳师网站壁纸
2021/05/19 Python
SSM项目使用拦截器实现登录验证功能
2022/01/22 Java/Android