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

纯CSS实现商品图片点击放大效果，带有大图关闭按钮
兼容性：IE6+ FireFox2+ Opera9+   更新时间：2010-01-26

简介：商品展示用的点击小图看大图效果，纯CSS实现，没有任何javascript代码，大图打开后必须点关闭按钮才能返回页面，效果简单实用。


纯CSS实现商品图片点击放大效果，带有大图关闭按钮

查看源代码：查看




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

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

<style type="text/css">
.product {width:320px; height:150px; border:1px solid #ddd; margin:0 auto; padding:10px;}
.productInfo {width:150px; float:left;}
.productMfr {font:bold 16px/18px arial, sans-serif; color:#c00; padding:0; margin:0;}
.productType {font:bold 14px/18px arial, sans-serif; color:#000; padding:0; margin:0;}
.features {padding:10px 0; margin:0; list-style:none;}
.features li {font:normal 12px/16px arial, sans-serif; color:#555;}
.price {font:bold 14px/18px arial, sans-serif; color:#00c; padding:0 0 10px 0; margin:0;}

a.clickbox, a.clickbox:visited, a.clickbox:hover {text-decoration:none; text-align:center;}
a.clickbox img {display:block; border:0;}

a.clickbox b {display:block;}
a.clickbox em {font:bold 10px/12px arial,sans-serif; color:#000;}
a.clickbox {float:left; margin:0 15px 15px 0; display:inline;}

a.clickbox .lightbox {position:absolute; left:-9999px; top:-10000px; cursor:default; z-index:500;}

a.clickbox .light {position:absolute; left:0; top:0; width:100%;}
a.clickbox .box {position:absolute; left:0; width:100%; text-align:center; height:300px; top:30%; margin-top:-150px;}
/* trigger for IE6 */
a.clickbox:active {direction:ltr;}

a.clickbox:active .lightbox {left:0; top:0; width:100%; height:100%;}
a.clickbox .lightbox:hover,
a.clickbox:focus .lightbox {position:fixed; left:0; top:0; width:100%; height:100%;}

a.clickbox .lightbox:hover .light,
a.clickbox:active .lightbox .light,
a.clickbox:focus .lightbox .light {background:#fff; width:100%; height:100%; filter: alpha(opacity=90);
 filter: progid:DXImageTransform.Microsoft.Alpha(opacity=90); opacity:0.90;
}

a.clickbox .lightbox:hover .box img,
a.clickbox:active .lightbox .box img,
a.clickbox:focus .lightbox .box img {border:1px solid #ddd; margin:0 auto; padding:30px; background:#fff;}

a.clickbox .lightbox:hover .box span,
a.clickbox:active .lightbox .box span,
a.clickbox:focus .lightbox .box span {display:block; width:560px; padding:0; margin:10px auto; text-align:center; text-decoration:none; background:#fff; border:1px solid #ddd;}
a.clickbox .lightbox .box span.title {font:normal 22px/26px verdana, sans-serif; color:#069;}
a.clickbox .lightbox .box span.text {font:normal 11px/16px verdana, sans-serif; color:#333;}

.clear {clear:left;}

a.clickbox i {display:block; width:32px; height:32px; position:fixed; right:-100px; top:0; z-index:500;}

a.clickbox .lightbox:hover i,
a.clickbox:active i,
a.clickbox:focus i {right:50%; top:30%; background:url(close2.png); margin-right:-295px; margin-top:-165px;}

#close {display:block; position:fixed; width:32px; height:32px; right:50%; top:30%; margin-right:-295px; margin-top:-165px; z-index:1000; background:url(trans.gif); cursor:pointer;}


</style>

<!--[if lte IE 6]>
<style type="text/css">
/* to get IE6 to center the Clickbox - adjust the height to cover the whole page */
a.clickbox:active .lightbox {left:50%; margin-left:-2500px; height:2000px; width:5000px;}
a.clickbox:active .lightbox .light {height:2000px;}
a.clickbox i {display:block; width:32px; height:32px; overflow:hidden; float:right; cursor:pointer; position:static; background:url(close.png);}

#close {margin-right:0; margin-top:0; z-index:1000; background:url(trans.gif); cursor:pointer;}
a.clickbox .lightbox:hover i,
a.clickbox:active i {right:32px; top:32px; background:url(close.png); margin-right:0; margin-top:0;  background:url(close.png);}

a.clickbox .frame {width:500px; height:300px; background:#fff; border:1px solid #000; padding:10px;}
a.clickbox .box {top:5%; margin-top:0;}
</style>
<![endif]-->



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

<div class="product">
	<a class="clickbox" href="#url">
		<img src="eos500d-thumb.jpg" alt="" title="Click for larger image" />
		<em>&#8226; large image &#8226;</em>
		<b class="lightbox">
			<b class="light"></b>
			<b class="box">
				<img src="eos500d.jpg" alt="" />
				<span class="title">It's your vision - make it count</span>
				<span class="text">With the EOS 500D, every side of your story comes alive. Capture every detail in stunning 15.1 Megapixel resolution, or switch to shooting pin-sharp Full High Definition video.<br /><i></i></span>
			</b>
		</b>
	</a>
	<div class="productInfo">
		<p class="productMfr">Canon EOS 500D</p>
		<p class="productType">Digital SLR Camera</p>
		<ul class="features">
			<li>&#8226; 15.1 MP CMOS sensor</li> 
			<li>&#8226; Full HD (1080p) movies</li>
		</ul>
		<p class="price">&#163;470</p>
		<img src="cart.gif" alt="Checkout" />
	</div>
</div>
<div id="close"></div>


下载：     从本地下载

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

分享到： 更多

上一篇： 纯CSS实现的点击缩略图看满屏大图   下一篇: 基于CSS3的幻灯片效果