jquery hover鼠标悬停导航条图标向下滑动显示



90 359 120



特效描述:悬停导航条 图标向下滑动,

代码结构

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

加群请备注:从官网了解到