JavaScript实现导航动态效果实践

来源：互联网发布：燕十八mysql教程编辑：程序博客网时间：2024/06/06 17:06

/*动态导航效果*/(function($) { // JavaScript自运行函数$(function() { // jQuery Ready()语句/*var $nav = $('#navigation'),$current_item = $nav.find('.focus'),$lava = $('<li class ="lava"/>');$lava.css({width:$current_item.outerWidth(),height:$current_item.outerHeight()+50,opacity:0,position:'absolute',top :$current_item.position().top-(20/2),left :$current_item.position().left,}).appendTo($nav.find('ul'));$nav.css('position','relative').find('a').css({  position:'relative',  zIndex:1});$nav.find('li').bind('mouseover focusin',function(){$lava.css({opacity:1})$lava.animate({left:$(this).position().left,width:$(this).outerWidth()},{   duration:400,   easing:'easeInOutElastic',   queue:false   })}).bind('mouseout focusout',function(){setTimeout(function(){$lava.css({opacity:0})$lava.animate({left:$(this).position().left,width:$(this).outerWidth()},200);},2000);})*/});})(jQuery); // 传入window.jQuery对象

0 0