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

2015-09-06 16:29作者：yezheng

本文实例讲述了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">

<head>

<title>动态导航插件</title>

<!--

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>

(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>

</ul>

</ul>

</ul>

</ul>

</body>

</html>

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