首页 > JavaScript代码 > 图片.相册.幻灯片 Image > 详细内容

CSS3实现的相册，点小图可看大图
兼容性：IE6+ FireFox2+ Opera9+   更新时间：2010-01-27

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


CSS3实现的相册，点小图可看大图

查看源代码：查看




使用说明：
    下载
点击这里下载脚本源代码


在网页<head>区添加以下代码

<style type="text/css">

#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]-->



在网页<body>区添加以下代码
<div id="gallery">
<ul>
	<li><a href="#x"><img src="trees/t1.jpg" alt="" /><b><span></span><i><img src="trees/t1.jpg" alt="" /></i></b></a></li>
	<li><a href="#x"><img src="trees/t2.jpg" alt="" /><b><span></span><i><img src="trees/t2.jpg" alt="" /></i></b></a></li>
	<li><a href="#x"><img src="trees/t3.jpg" alt="" /><b><span></span><i><img src="trees/t3.jpg" alt="" /></i></b></a></li>
	<li><a href="#x"><img src="trees/t4.jpg" alt="" /><b><span></span><i><img src="trees/t4.jpg" alt="" /></i></b></a></li>
	<li><a href="#x"><img src="trees/t5.jpg" alt="" /><b><span></span><i><img src="trees/t5.jpg" alt="" /></i></b></a></li>
	<li><a href="#x"><img src="trees/t6.jpg" alt="" /><b><span></span><i><img src="trees/t6.jpg" alt="" /></i></b></a></li>
	<li><a href="#x"><img src="trees/t7.jpg" alt="" /><b><span></span><i><img src="trees/t7.jpg" alt="" /></i></b></a></li>
	<li><a href="#x"><img src="trees/t8.jpg" alt="" /><b><span></span><i><img src="trees/t8.jpg" alt="" /></i></b></a></li>
	<li><a href="#x"><img src="trees/t9.jpg" alt="" /><b><span></span><i><img src="trees/t9.jpg" alt="" /></i></b></a></li>
	<li><a href="#x"><img src="trees/t10.jpg" alt="" /><b><span></span><i><img src="trees/t10.jpg" alt="" /></i></b></a></li>
	<li><a href="#x"><img src="trees/t11.jpg" alt="" /><b><span></span><i><img src="trees/t11.jpg" alt="" /></i></b></a></li>
	<li><a href="#x"><img src="trees/p1.jpg" alt="" /><b><span></span><i><img src="trees/p1.jpg" alt="" /></i></b></a></li>
	<li><a href="#x"><img src="trees/t13.jpg" alt="" /><b><span></span><i><img src="trees/t13.jpg" alt="" /></i></b></a></li>
	<li><a href="#x"><img src="trees/t14.jpg" alt="" /><b><span></span><i><img src="trees/t14.jpg" alt="" /></i></b></a></li>
	<li><a href="#x"><img src="trees/t15.jpg" alt="" /><b><span></span><i><img src="trees/t15.jpg" alt="" /></i></b></a></li>
	<li><a href="#x"><img src="trees/t16.jpg" alt="" /><b><span></span><i><img src="trees/t16.jpg" alt="" /></i></b></a></li>
	<li><a href="#x"><img src="trees/t17.jpg" alt="" /><b><span></span><i><img src="trees/t17.jpg" alt="" /></i></b></a></li>
	<li><a href="#x"><img src="trees/t18.jpg" alt="" /><b><span></span><i><img src="trees/t18.jpg" alt="" /></i></b></a></li>
</ul>
</div>


下载：     从本地下载

出处：http://www.cssplay.co.uk

分享到： 更多

上一篇： 基于CSS3的幻灯片效果   下一篇: CSS3实现vista风格的按钮