查看完整源代码

CSS3实现的相册，点小图可看大图
兼容性：IE6+ FireFox2+ Opera9+ 更新时间：2010-1-27 查看代码说明>>>

简介：纯CSS实现的相册效果，点击缩略图可以浏览大图，采用CSS3技术实现，无任何js代码

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS3实现的相册，点小图可看大图 - 分享JavaScript-sharejs.com</title>
<meta name="Copyright" content="JavaScript分享网 http://www.sharejs.com/" />
<meta name="description" content="CSS3实现的相册，点小图可看大图,JavaScript分享网" />
<meta content="JavaScript,分享,JavaScript代码,Ajax" name="keywords" />

#info {position:relative; z-index:10;}
a, a:visited, a:hover, a:active {}
#gallery {width:740px; height:400px; position:relative; z-index:100; padding-right:10px;}
#gallery ul {list-style:none; padding:0; margin:0; width:180px; float:right;}
#gallery ul li {display:inline; width:60px; height:60px; float:left;}

#gallery ul li a {display:block; width:50px; height:50px; text-decoration:none; padding:4px; border:1px solid #fff;}
#gallery ul li a img {width:50px; height:50px; border:0;
-o-box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.6);
-icab-box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.6);
-khtml-box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.6);
-moz-box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.6);
-webkit-box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.6);
box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.6);
}

#gallery ul li a b {position:absolute; visibility:hidden; left:0; top:5px; display:block; width:560px; height:350px; background:#fff;
filter: alpha(opacity=0); filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0); opacity:0;
-webkit-transition: all 0.6s ease-in-out;
}

#gallery ul li a b img {-webkit-transform: scale(0);
-webkit-transition: -webkit-transform 0.6s ease-in-out;
}

#gallery ul li a:hover {white-space:normal; outline:0;}

#gallery ul li a:hover b {filter: alpha(opacity=100); filter: progid:DXImageTransform.Microsoft.Alpha(opacity=100); opacity:1; visibility:visible;}
#gallery ul li a:hover b img {-webkit-transform: scale(1);}

#gallery ul li a b i {display:block; width:570px; height:360px; text-align:center; display:table-cell; vertical-align:middle;}
#gallery ul li a b i img {width:auto; height:auto; border:1px solid #444;
-o-box-shadow: 10px 10px 2px rgba(0, 0, 0, 0.4);
-icab-box-shadow: 10px 10px 2px rgba(0, 0, 0, 0.4);
-khtml-box-shadow: 10px 10px 2px rgba(0, 0, 0, 0.4);
-moz-box-shadow: 10px 10px 2px rgba(0, 0, 0, 0.4);
-webkit-box-shadow: 10px 10px 2px rgba(0, 0, 0, 0.4);
box-shadow: 10px 10px 2px rgba(0, 0, 0, 0.4);
}

</style>
<!--[if lte IE 7]>
<style type="text/css">

#gallery ul li a b {text-align:center; z-index:-1;}
#gallery ul li a b span {display:block; width:0; height:100%; display:inline-block; vertical-align:middle;} 
#gallery ul li a b img {margin:0 auto; display:inline-block; vertical-align:middle;}
</style>
<![endif]-->

</head>
<body>
<div id="gallery">
<ul>
	<li><a href="#x"><img src="trees/t1.jpg" alt="" /><img src="trees/t1.jpg" alt="" /></a></li>
	<li><a href="#x"><img src="trees/t2.jpg" alt="" /><img src="trees/t2.jpg" alt="" /></a></li>
	<li><a href="#x"><img src="trees/t3.jpg" alt="" /><img src="trees/t3.jpg" alt="" /></a></li>
	<li><a href="#x"><img src="trees/t4.jpg" alt="" /><img src="trees/t4.jpg" alt="" /></a></li>
	<li><a href="#x"><img src="trees/t5.jpg" alt="" /><img src="trees/t5.jpg" alt="" /></a></li>
	<li><a href="#x"><img src="trees/t6.jpg" alt="" /><img src="trees/t6.jpg" alt="" /></a></li>
	<li><a href="#x"><img src="trees/t7.jpg" alt="" /><img src="trees/t7.jpg" alt="" /></a></li>
	<li><a href="#x"><img src="trees/t8.jpg" alt="" /><img src="trees/t8.jpg" alt="" /></a></li>
	<li><a href="#x"><img src="trees/t9.jpg" alt="" /><img src="trees/t9.jpg" alt="" /></a></li>
	<li><a href="#x"><img src="trees/t10.jpg" alt="" /><img src="trees/t10.jpg" alt="" /></a></li>
	<li><a href="#x"><img src="trees/t11.jpg" alt="" /><img src="trees/t11.jpg" alt="" /></a></li>
	<li><a href="#x"><img src="trees/p1.jpg" alt="" /><img src="trees/p1.jpg" alt="" /></a></li>
	<li><a href="#x"><img src="trees/t13.jpg" alt="" /><img src="trees/t13.jpg" alt="" /></a></li>
	<li><a href="#x"><img src="trees/t14.jpg" alt="" /><img src="trees/t14.jpg" alt="" /></a></li>
	<li><a href="#x"><img src="trees/t15.jpg" alt="" /><img src="trees/t15.jpg" alt="" /></a></li>
	<li><a href="#x"><img src="trees/t16.jpg" alt="" /><img src="trees/t16.jpg" alt="" /></a></li>
	<li><a href="#x"><img src="trees/t17.jpg" alt="" /><img src="trees/t17.jpg" alt="" /></a></li>
	<li><a href="#x"><img src="trees/t18.jpg" alt="" /><img src="trees/t18.jpg" alt="" /></a></li>
</ul>
</div>

获取更多JavaScript代码，请登录JavaScript分享网 <a href="http://www.sharejs.com">http://www.sharejs.com</a>
 
转载请注明出处，本代码仅供学习交流，不可用于任何商业用途！
</div>
</body>
</html>

提示：点击“运行代码”可预览效果，可以修改部分代码后再运行！