HTML5网页设计

图片效果

jQuery实现鼠标滑过放大的图片墙效果

时间:2014-12-02 14:10来源:未知作者:user点击:
jQuery实现图片墙图片展示效果,鼠标滑过图片放大并显示标题,查看代码如下:

jQuery实现图片墙图片展示效果,鼠标滑过图片放大并显示标题,查看代码如下:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<FCK:meta http-equiv="Content-Type" content="text/html; charset=utf-8"  />
<title>jQuery实现鼠标滑过放大的图片墙效果 - ShejiCool.com</title>
<script type="text/javascript" charset="utf-8" src='http://www.shejicool.com/demo/jquery.min.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:#000;
color:white;
opacity:0.8;
}
.caption .captionInside{
padding:10px;
margin:0px;
}
.clear { clear:both; }
a{ color:#FFCC00;}
</style>
</head>
<body>
<div class='thumbnailWrapper'>
<!-- start unordered list -->
<ul>
<li>
<a href='http://www.baidu.com/s?wd=shejicool.com'><img src='http://www.shejicool.com/images/demo/400_1.jpg' /></a>
<div class='caption'>
<p class='captionInside'>图片墙效果</p>
</div>
</li>
<li>
<a href='http://www.baidu.com/s?wd=shejicool.com'><img src='http://www.shejicool.com/images/demo/400_2.jpg' /></a>
<div class='caption'>
<p class='captionInside'>图片墙效果</p>
</div>
</li>
<li>
<a href='http://www.baidu.com/s?wd=shejicool.com'><img src='http://www.shejicool.com/images/demo/400_3.jpg' /></a>
<div class='caption'>
<p class='captionInside'>图片墙效果</p>
</div>
</li>
<li>
<a href='http://www.baidu.com/s?wd=shejicool.com'><img src='http://www.shejicool.com/images/demo/400_4.jpg' /></a>
<div class='caption'>
<p class='captionInside'>图片墙效果</p>
</div>
</li>
<li>
<a href='http://www.baidu.com/s?wd=shejicool.com'><img src='http://www.shejicool.com/images/demo/400_1.jpg' /></a>
<div class='caption'>
<p class='captionInside'>图片墙效果</p>
</div>
</li>
<li>
<a href='http://www.baidu.com/s?wd=shejicool.com'><img src='http://www.shejicool.com/images/demo/400_2.jpg' /></a>
<div class='caption'>
<p class='captionInside'>图片墙效果</p>
</div>
</li>
<li>
<a href='http://www.baidu.com/s?wd=shejicool.com'><img src='http://www.shejicool.com/images/demo/400_3.jpg'/></a>
<div class='caption'>
<p class='captionInside'>图片墙效果</p>
</div>
</li>
<li>
<a href='http://www.baidu.com/s?wd=shejicool.com'><img src='http://www.shejicool.com/images/demo/400_4.jpg' /></a>
<div class='caption'>
<p class='captionInside'>图片墙效果</p>
</div>
</li>
<li>
<a href='http://www.baidu.com/s?wd=shejicool.com'><img src='http://www.shejicool.com/images/demo/400_1.jpg' /></a>
<div class='caption'>
<p class='captionInside'>图片墙效果</p>
</div>
</li>
<div class='clear'></div><!-- clear the float -->
</ul><!-- end unordered list -->
</div><!-- end spolightWrapper div -->
</body>
</html>
阅完本篇文章?您还可以: 收藏本文 文章挑错 朋友推荐