Jquery實現超酷的導航菜單特效

dengjianbin 12年前發布 | 37K 次閱讀 jQuery頁面導航插件 jQuery插件 jQuery

Jquery實現超酷的導航菜單特效是一款比flash菜單更炫的特效，效果有左右滑動、上下有彈性，還帶有無限級別菜單功能，是一款非常實用的特效，使用簡單，不多說了，先看效果

 

效果如下：



核心代碼如上：

(function($) {
    $.fn.lavaLamp = function(o) {
        o = $.extend({ fx: "linear", speed: 500, click: function(){} }, o || {});



    return this.each(function(index) {

        var me = $(this), noop = function(){},
            $back = $('<li class="back"><div class="left"></div></li>').appendTo(me),
            $li = $(">li", this), curr = $("li.current", this)[0] || $($li[0]).addClass("current")[0];

        $li.not(".back").hover(function() {
            move(this);
        }, noop);

        $(this).hover(noop, function() {
            move(curr);
        });

        $li.click(function(e) {
            setCurr(this);
            return o.click.apply(this, [e, this]);
        });

        setCurr(curr);

        function setCurr(el) {
            $back.css({ "left": el.offsetLeft+"px", "width": el.offsetWidth+"px" });
            curr = el;
        };

        function move(el) {
            $back.each(function() {
                $.dequeue(this, "fx"); }
            ).animate({
                width: el.offsetWidth,
                left: el.offsetLeft
            }, o.speed, o.fx);
        };

        if (index == 0){
            $(window).resize(function(){
                $back.css({
                    width: curr.offsetWidth,
                    left: curr.offsetLeft
                });
            });
        }

    });
};



})(jQuery);</pre> 
項目主頁：http://www.baiduhome.net/lib/view/home/1344994215928
 本文由用戶 dengjianbin 自行上傳分享，僅供網友學習交流。所有權歸原作者，若您的權利被侵害，請聯系管理員。
 轉載本站原創文章，請注明出處，并保留原始鏈接、圖片水印。
 本站是一個以用戶分享為主的開源技術平臺，歡迎各類分享！