jquery hover图片网格布局鼠标悬停图片缩小插件


jquery hover图片网格布局鼠标悬停图片缩小插件
jquery hover图片网格布局鼠标悬停图片缩小插件以及图片网格布局、鼠标悬停、图片缩小等js/jquery网页特效代码下载。

1. 引入CSS

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

2. 引入JS

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

3. HTML代码

<div id="container" class="container">
	<div class="wrap">
		<a href="https://www.51qianduan.com/">51前端</a>
	</div>
	<div class="wrap">
		<a href="https://www.51qianduan.com/">51前端</a>
	</div>
	<div class="wrap">
		<a href="https://www.51qianduan.com/">51前端</a>
	</div>
	<div class="wrap">
		<a href="https://www.51qianduan.com/">51前端</a>
	</div>
	<div class="wrap">
		<a href="https://www.51qianduan.com/">51前端</a>
	</div>
	<div class="wrap">
		<a href="https://www.51qianduan.com/">51前端</a>
	</div>
</div>
<script type="text/javascript">
$(function(){
	$('#container img').hover(function(){
		var $this = $(this);
		$this.stop().animate({'opacity':'1.0','height':'200px','top':'0px','left':'0px'});
	},function(){
		var $this = $(this);
		$this.stop().animate({'opacity':'0.5','height':'500px','top':'-66.5px','left':'-150px'});
	});
});
</script>

相关推荐

发表评论

相关文章