积跬步，聚小流------具有滑动效果的导航

导航栏是站点的一个重要部分。具有良好动态效果的导航栏无疑会给站点添色不少，而水平动态导航栏就是当中一种，我一直非常喜欢，当然它分为非常多种。这里先来看当中一种效果。

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才是本身就是相对第一个非流布局的父级的元素中。

通过以上解释。相信你也会非常清楚它的实现方法了吧，快点把它用到项目中吧。有没有棒棒哒...