导航栏是网站的一个重要部分，具有良好动态效果的导航栏无疑会给网站添色不少，而水平动态导航栏就是其中一种，我一直非常喜欢，当然它分为很多种，这里先来看其中一种效果。
1、效果样例
这个图片相信关注过这种效果导航栏的人都很熟悉了，我也是从这个入手慢慢入门滴...
至于样式结构这里就不详述了，相信都不会怵头，这里上下jquery效果的代码：
; (function ($) {
$.extend({
'nicenav': function (con) {
con = typeof con === 'number' ? con : 400;
var $lis = $('#nav>li'), $h = $('#buoy')
$lis.hover(function () {
$h.stop().animate({
'left': $(this).offsetParent().context.offsetLeft
}, con);
}, function () {
$h.stop().animate({
'left': '-157px'
}, con);
})
}
});
}(jQuery));
2、代码分析
这样我们首先来一点点分析效果的代码实现原理：
首先是最外层的 ;(function($){})(jQuery)是一个匿名函数，通常js库都采用这种自执性的匿名函数来保护内部变量；至于前面的“；”则是为了防止多文件集成一个文件后，高压缩从而造成语法错误而添加的。（“大牛的做派”）
而$.extend({});是我们在写插件中常用的extend扩展方法，像$.fn.extend({});也是这样，举个例子来说的话：
$.extend({
hello:function(){alert('hello');}
});
就是讲hello方法添加到jquery的全局变量中去，等调用的时候直接用$.hello()即可，至于我们要分析的那段代码同样$.nicenav(参数)即可。
以上都是在写插件中常用到的基本知识，我们再来看下具体当前效果的实现代码。
con = typeof con === 'number' ? con : 400;
con是我们需要传递的参数，这里代表了“css完成改变的时间”，也可以说是相应的速度，但是这个确实”数值越大，速度越慢“的。
而js中的typeof函数是用来判断数值类型的，它返回的字符串可能有“number”，“String”，“boolean”，“object”，“function”和“undefined”。
至于===？：则是我们熟悉的三元运算符，===代表了boolean，？代表了是否，：则代表了要么..要么..。
这些都理解了的话，这句话的意思也就自然明白了，如果我们传递过来的参数是数字，那con继续为我们传递过来的那个数字，如果参数不是数字，那我们就默认赋给它一个400，则是防止其它不明白原理的人乱调用，从而发生错误。
var $lis = $('#nav>li'), $h = $('#buoy')
这句则就比较好理解了，只是将相应的取值简写而已，一方面看起来美观，另一方面如果出现更改的情况，可以减少工作量，典型的面向对象思想啊。
$lis.hover(function () {
$h.stop().animate({
'left': $(this).offsetParent().context.offsetLeft
}, con);
}, function () {
$h.stop().animate({
'left': '-157px'
}, con);
})
至于这段真正的逻辑，则是#nav>li的hover事件的响应，需要注意的一点是hover()括号的起止之间的方法体，并不一定只有一个方法，这里就有两个，当hover事件发生时和hover事件失去时，不同的响应方法。
animate({},time)方法是样式改变动态化，而stop()事件则是先停止，出现在这里，则是为重复执行事件时明确执行方法。
$(this).offsetParent().context.offsetLeft是父层和当前层的相对距离，offsetParent代表了第一个非流布局的父级元素，offsetLeft就是则就是相对于指定父级的左边距离，至于offsetLeft本身已经是针对于非流父级的，但还要用到上下文context，我当前得到的原因是：因为offset()返回的其实是相对于文档的坐标，需要用jquery的offsetParent明确下父级，而position才是本身就是相对第一个非流布局的父级元素。
通过以上解释，相信你也会很清楚它的实现方法了吧，快点把它用到项目中吧，有没有棒棒哒...
版权声明：本文为博主原创文章，未经博主允许不得转载。