jquery图标导航鼠标滑过气泡放大缩小显示二级菜单插件


jquery图标导航鼠标滑过气泡放大缩小显示二级菜单插件
jquery图标导航鼠标滑过气泡放大缩小显示二级菜单插件以及图标导航、鼠标滑过、气泡放大缩小、显示二级菜单等js/jquery网页特效代码下载。

1. 引入JS

<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>

2. HTML代码

<div class="navigation" id="nav">
	<div class="item user">
		<img src="images/bg_user.png" alt="" width="199" height="199" class="circle"/>
		<a href="http://www.51qianduan.com/" class="icon"></a>
		<h2>User</h2>
		<ul>
			<li><a href="https://www.51qianduan.com/" target="_blank">51前端</a></li>
			<li><a href="https://www.51qianduan.com/" target="_blank">51前端</a></li>
			<li><a href="https://www.51qianduan.com/" target="_blank">51前端</a></li>
		</ul>
	</div><!--item end-->
	<div class="item home">
		<img src="images/bg_home.png" alt="" width="199" height="199" class="circle"/>
		<a href="http://www.51qianduan.com/" class="icon"></a>
		<h2>Home</h2>
		<ul>
			<li><a href="https://www.51qianduan.com/" target="_blank">51前端</a></li>
			<li><a href="https://www.51qianduan.com/" target="_blank">51前端</a></li>
			<li><a href="https://www.51qianduan.com/" target="_blank">51前端</a></li>
		</ul>
	</div><!--item end-->
	<div class="item shop">
		<img src="images/bg_shop.png" alt="" width="199" height="199" class="circle"/>
		<a href="http://www.51qianduan.com/" class="icon"></a>
		<h2>Shop</h2>
		<ul>
			<li><a href="https://www.51qianduan.com/" target="_blank">51前端</a></li>
			<li><a href="https://www.51qianduan.com/" target="_blank">51前端</a></li>
			<li><a href="https://www.51qianduan.com/" target="_blank">51前端</a></li>
		</ul>
	</div><!--item end-->
	<div class="item camera">
		<img src="images/bg_camera.png" alt="" width="199" height="199" class="circle"/>
		<a href="http://www.51qianduan.com/" class="icon"></a>
		<h2>Photos</h2>
		<ul>
			<li><a href="https://www.51qianduan.com/" target="_blank">51前端</a></li>
			<li><a href="https://www.51qianduan.com/" target="_blank">51前端</a></li>
			<li><a href="https://www.51qianduan.com/" target="_blank">51前端</a></li>
		</ul>
	</div><!--item end-->
	<div class="item fav">
		<img src="images/bg_fav.png" alt="" width="199" height="199" class="circle"/>
		<a href="http://www.51qianduan.com/" class="icon"></a>
		<h2>Love</h2>
		<ul>
			<li><a href="https://www.51qianduan.com/" target="_blank">51前端</a></li>
			<li><a href="https://www.51qianduan.com/" target="_blank">51前端</a></li>
			<li><a href="https://www.51qianduan.com/" target="_blank">51前端</a></li>
		</ul>
	</div><!--item end-->
</div><!--navigation end-->
<script type="text/javascript">
$(function(){
	$('#nav > div').hover(function(){
		var $this = $(this);
		$this.find('img').stop().animate({'width':'199px','height':'199px','top':'-25px','left':'-25px','opacity':'1.0'},500,'easeOutBack',function(){
			$(this).parent().find('ul').fadeIn(700);
		});
		$this.find('a:first,h2').addClass('active');
	},function(){
		var $this = $(this);
		$this.find('ul').fadeOut(500);
		$this.find('img').stop().animate({'width':'52px','height':'52px','top':'0px','left':'0px','opacity':'0.1'},5000,'easeOutBack');
		$this.find('a:first,h2').removeClass('active');
	});
});
</script>

相关推荐

发表评论

相关文章