jquery hover鼠標懸停導航條圖標向下滑動顯示



94 374 125



特效描述:懸停導航條 圖標向下滑動,

代碼結構

1. 引入CSS

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

2. 引入JS

<script type="text/javascript" src="jquery-1.3.2.js"></script>

3. HTML代碼

<style type="text/css">
body{margin:0px;padding:0px;background-color:#f0f0f0;font-family:Arial;}
</style>
<div class="navigation">
	<ul class="menu" id="menu">
		<li><span class="ipod"></span><a href="http://www.dijiuzhanzhang.com/" class="first">Players</a></li>
		<li><span class="video_camera"></span><a href="http://www.dijiuzhanzhang.com/">Cameras</a></li>
		<li><span class="television"></span><a href="http://www.dijiuzhanzhang.com/">TVs</a></li>
		<li><span class="monitor"></span><a href="http://www.dijiuzhanzhang.com/">Screens</a></li>
		<li><span class="toolbox"></span><a href="http://www.dijiuzhanzhang.com/">Tools</a></li>
		<li><span class="telephone"></span><a href="http://www.dijiuzhanzhang.com/">Phones</a></li>
		<li><span class="print"></span><a href="http://www.dijiuzhanzhang.com/" class="last">Printers</a></li>
	</ul>
</div>
<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>



用戶評論
大牛,別默默的看了,快登錄幫我點評一下吧!:)      登錄 | 注冊
admin
關注
TA的相關作品 >>更多
熱搜關鍵詞
熱門下載


熱門標簽:
?
×
×

注冊

官方QQ群

掃描上面二維碼加微信群

官方QQ群

jQuery/js討論群
群號:642649996
Css3+Html5討論群
群號:322131262

加群請備注:從官網了解到

老夫子电子