left:33px; /*128/2 - 32(half of icon) +1 of border*/
}
ul.menu li span.video_camera{
background-image:url(images/video_camera.png);
left:163px; /* plus 128 + 2px of border*/
}
ul.menu li span.television{
background-image:url(images/television.png);
left:293px;
}
ul.menu li span.monitor{
background-image:url(images/monitor.png);
left:423px;
}
ul.menu li span.toolbox{
background-image:url(images/toolbox.png);
left:553px;
}
ul.menu li span.telephone{
background-image:url(images/telephone.png);
left:683px;
}
ul.menu li span.print{
background-image:url(images/print.png);
left:813px;
}
</style>
</head>
<body>
<div class="navigation">
<ul class="menu" id="menu">
<li><span class="ipod"></span><a href="#" class="first">Players</a></li>
<li><span class="video_camera"></span><a href="#">Cameras</a></li>
<li><span class="television"></span><a href="#">TVs</a></li>
<li><span class="monitor"></span><a href="#">Screens</a></li>
<li><span class="toolbox"></span><a href="#">Tools</a></li>
<li><span class="telephone"></span><a href="#">Phones</a></li>
<li><span class="print"></span><a href="#" class="last">Printers</a></li>
</ul>
</div>
<script type="text/javascript" src="jquery1.3.2.js"></script>
<script type="text/javascript">
$(function() {
var d=1000;
$('#menu span').each(function(){
$(this).stop().animate({
'top':'-17px'
},d+=250);
});
$('#menu > li').hover(
function () {
var $this = $(this);
$('a',$this).addClass('hover');
$('span',$this).stop().animate({'top':'40px'},300).css({'zIndex':'10'});
},
function () {
var $this = $(this);
$('a',$this).removeClass('hover');
$('span',$this).stop().animate({'top':'-17px'},800).css({'zIndex':'-1'});
}
);
});
</script>
</body>
</html>
希望本文所述对大家的jQuery程序设计有所帮助。
