图片放大特效

分类:技术文档 - JS文档 | 阅读(3434) | 发布于:2015-02-25 15:17

Demo文件下载

<!DOCTYPE html>
<html>

	<head>
		<title>图片放大特效</title>
		<meta charset="UTF-8">
		<meta content="width=device-width" name="viewport">
		<script src="http://www.lixiaocheng.cn/Default/Js/jquery-1.9.1.js" ></script>
		<style>
			.pic_content{width:320px;height:320px;margin:0 auto; }
			.brd{width:160px;height:160px;overflow:hidden; float:left;}
			.pic_content img{position:relative;opacity:0.5; border-radius: 20px; }
		</style>
	</head>
	
	<body>
		<!-- 最外层 -->
		<div class="bd pic_content" >
			<!-- 中间层固定大小,超出隐藏 -->
			<div class="brd">
				<!-- 图片:默认不透明度0.5 -->
				<img src="http://www.lixiaocheng.cn/Default/Img/love2-160.jpg" />
			</div>
			<div class="brd">
				<img src="http://www.lixiaocheng.cn/Default/Img/love2-160.jpg" />
			</div>
			<div class="brd">
				<img src="http://www.lixiaocheng.cn/Default/Img/love2-160.jpg" />
			</div>
			<div class="brd">
				<img src="http://www.lixiaocheng.cn/Default/Img/love2-160.jpg" />
			</div>
		</div>

	</body>
</html>
<script>
	$('.pic_content img').hover(function () {
		$(this).clearQueue();
		$(this).animate({'opacity':'1.0', 'height':'200px','width':'200px','top':'-20px','left':'-20px'});
	},function(){
		$(this).clearQueue();
		$(this).animate({'opacity':'0.5', 'height':'160px', 'width':'160px','top':'0px','left':'0px'});
	}) ;
</script>

标签:图片放大特效