导航栏是站点的一个重要部分。具有良好动态效果的导航栏无疑会给站点添色不少，而水平动态导航栏就是当中一种，我一直非常喜欢，当然它分为非常多种。这里先来看当中一种效果。
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才是本身就是相对第一个非流布局的父级的元素中。
通过以上解释。相信你也会非常清楚它的实现方法了吧，快点把它用到项目中吧。有没有棒棒哒...
