Jquery实现超酷的导航菜单特效

dengjianbin 7年前

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);

项目主页:http://www.open-open.com/lib/view/home/1344994215928