1、调用CSS样式:
<link rel="stylesheet" href="css/style.css" type="text/css" />
2、调用JS插件代码:
<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
<!--[if IE 6]>
<script src="js/ie6PNG.js" type="text/javascript"></script>
<script type="text/javascript">DD_belatedPNG.fix('*');</script>
<![endif]-->
3、添加HTML代码:
将
<!--效果html开始-->......
<!--效果html结束-->之间的html和js代码;放在<body></body>之间。
4、JS代码:
<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>