jQuery图片墙示例代码

时间：2013-04-15 09:07 来源：互联网作者：源码搜藏浏览：次收藏挑错推荐打印

<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery实现的类似电视墙的缩略图展示</title>
<script type="text/javascript" charset="utf-8" src='http://www.codesocang.com/js/jquery.js'></script>
	<script type="text/javascript" charset="utf-8">
		$(window).load(function(){
			var thumbnail = {
				imgIncrease : 100,
				effectDuration : 400,
				imgWidth : $('.thumbnailWrapper ul li').find('img').width(), 
				imgHeight : $('.thumbnailWrapper ul li').find('img').height() 	
			};
			$('.thumbnailWrapper ul li').css({ 
				'width' : thumbnail.imgWidth, 
				'height' : thumbnail.imgHeight 	
			});
			$('.thumbnailWrapper ul li').hover(function(){
				$(this).find('img').stop().animate({
					width: parseInt(thumbnail.imgWidth) + thumbnail.imgIncrease,
					left: thumbnail.imgIncrease/2*(-1),
					top: thumbnail.imgIncrease/2*(-1)	
				},{ 
					"duration": thumbnail.effectDuration,
					"queue": false
				});
				$(this).find('.caption:not(:animated)').slideDown(thumbnail.effectDuration);
			}, function(){
				$(this).find('img').animate({
					width: thumbnail.imgWidth,
					left: 0,
					top: 0
				}, thumbnail.effectDuration);
				$(this).find('.caption').slideUp(thumbnail.effectDuration);
			});
		});
	</script>
<style type="text/css" media="screen">
body { background-color:#292929; color:white;text-align:center; font-family: 'georgia'; font-size: 13px; } 
		.thumbnailWrapper { width:600px; margin:0px auto; } 
		.thumbnailWrapper ul { 
			list-style-type: none; /* remove the default style for list items (the circles) */ 
			margin:0px; /* remove default margin */
			padding:0px; /* remove default padding */
		}
		.thumbnailWrapper ul li { 
			float:left;
			position:relative; 
			overflow:hidden; 
		}
		.thumbnailWrapper ul li a img { 
			width:200px; 
			position:relative;
			border:none;
		}
		.caption{
			position:absolute;
			bottom:0px;
			left:0px;
			width:100%;
			display:none;
			background:#0c4b62;
			color:white;
			opacity:0.9;
		}
		.caption .captionInside{
			padding:10px;
			margin:0px;
		}
		.clear { clear:both; } 
		a{ color:#FFCC00;}
	</style>
</head>
<body>
	<h4>jQuery图片墙</h4>
	<div class='thumbnailWrapper'>
		
		<ul>
			<li>
				<a href='http://www.codesocang.com/'><img src='http://www.codesocang.com/uploads/allimg/130411/2-130411145350-lp.jpg' /></a>
				<div class='caption'>
					<p class='captionInside'>阳光春色</p>
				</div>
			</li>
			<li>
				<a href='http://www.codesocang.com/shiliang/index.html'><img src='http://www.codesocang.com/uploads/allimg/130411/2-130411145427-lp.jpg' /></a>
				<div class='caption'>
					<p class='captionInside'>旅游四季</p>
				</div>
			</li>
			<li>
				<a href='http://www.codesocang.com/png/index.html'><img src='http://www.codesocang.com/uploads/allimg/130411/2-130411145432-lp.jpg' /></a>
				<div class='caption'>
					<p class='captionInside'>漂亮风景</p>
				</div>
			</li>
			<li>
				<a href='http://www.codesocang.com/texiao/index.html'><img src='http://www.codesocang.com/uploads/allimg/130411/2-130411145427-50-lp.jpg' /></a>
				<div class='caption'>
					<p class='captionInside'>我最喜欢的</p>
				</div>
			</li>
			<li>
				<a href='http://www.codesocang.com/psd/index.html'><img src='http://www.codesocang.com/uploads/allimg/130414/2-130414230H6-lp.jpg' /></a>
				<div class='caption'>
					<p class='captionInside'>Quantum</p>
				</div>
			</li>
			<li>
				<a href='http://www.codesocang.com/muban/index.html'><img src='http://www.codesocang.com/uploads/allimg/130411/2-130411145433-lp.jpg' /></a>
				<div class='caption'>
					<p class='captionInside'>Infinite Love</p>
				</div>
			</li>
			<li>
				<a href='http://www.codesocang.com/jiaocheng/index.html'><img src='http://www.codesocang.com/uploads/allimg/130411/2-130411145F0-lp.gif' /></a>
				<div class='caption'>
					<p class='captionInside'>Fathom</p>
				</div>
			</li>
			<li>
				<a href='http://www.codesocang.com/yuanma/index.html'><img src='http://www.codesocang.com/uploads/allimg/130411/2-130411145G5-lp.gif' /></a>
				<div class='caption'>
					<p class='captionInside'>细水缠绵</p>
				</div>
			</li>
			<li>
				<a href='http://www.codesocang.com/chajian/index.html'><img src='http://www.codesocang.com/uploads/allimg/130411/2-130411145F3-lp.jpg' /></a>
				<div class='caption'>
					<p class='captionInside'>秋的绿叶</p>
				</div>
			</li>
			<div class='clear'></div>
		</ul>
	</div>
</body>
</html>

运行代码保存代码复制代码提示：您可以先修改部分代码再运行，保存代码功能在Firefox下无效。

jQuery图片墙示例代码，漂亮的图片墙，测试图片的分辨率有些小，图片不清淅，自己用了换成标准大小的图片，用在相册网站、摄影网站很唯美，有艺术感。 jQuery图片墙示例代码由源码搜藏网整理,转载请注明出处http://www.codesocang.com/texiao/pic/1307.html

jQuery图片墙示例代码

网页特效