古典风格的jQuery导航代码

古典风格的jQuery导航代码，载入时，古典风格的背景会向上“飞走”，鼠标移动到上面，红色背景会从上面“飞下来”，鼠标移走，又会“飞走”。
1、在head区域引入下面的css代码和js文件：

<link rel="stylesheet" href="css/style.css" type="text/css" />

2、在body区域引入下面的html代码和js文件：

<ul class="menu" id="menu">
    <li class="current"><span class="ipod_1 aaa"></span><a href="http://sc.chinaz.com/"><img src="images/7.png" /></a></li>
    <li><span class="ipod_2"></span><a href="http://sc.chinaz.com/"><img src="images/6.png" /></a></li>
    <li><span class="ipod_3"></span><a href="http://sc.chinaz.com/"><img src="images/5.png" /></a></li>
    <li><span class="ipod_4"></span><a href="http://sc.chinaz.com/"><img src="images/4.png" /></a></li>
    <li><span class="ipod_5"></span><a href="http://sc.chinaz.com/"><img src="images/3.png" /></a></li>
</ul>
<script type="text/javascript" src="http://www.5imoban.net/download/jquery/jquery-1.8.3.min.js"></script>
<script type="text/javascript">
$(function(){
    var d=1000;
    $('#menu span').each(function(){
        $(this).stop().animate({
            'top':'-122px'
        },d+=250);
    });
    $('#menu .aaa').each(function(){
        $(this).stop().animate({
            'top':'0px'
        },d+=250);
    });
    $('#menu .aaa').each(function(){
        $(this).stop().animate({
            'top':'0px'
        });
    });
    $('#menu > li').hover(function(){
        var $this = $(this);
        $('a',$this).addClass('hover');
        $('span',$this).stop().animate({'top':'0px'},300).css({'zIndex':'-1'});
    },function(){
        if(!$(this).hasClass("current"))
        {
        var $this = $(this);
        $('a',$this).removeClass('hover');
        $('span',$this).stop().animate({'top':'-122px'},800).css({'zIndex':'-1'});
        }
    });
});
</script>

部分素材资源来源网站，本站提供免费下载，如有侵权请联系站长马上删除！