纯CSS实现的点击缩略图看满屏大图，带有关闭按钮，大图情况下背景会变得不可用，只有点击了关闭按钮后才能回到原来的状态，完全没有JavaScript和iframe之类的复杂编程，非常强悍
查看演示页面 View Demo 查看全部代码 View Code
下载
点击这里下载脚本源代码
在网页<head>区添加以下代码
<style type="text/css">
.thumbholder {width:600px; margin:0 auto;}
a.clickbox, a.clickbox:visited, a.clickbox:hover {text-decoration:none;}
a.clickbox img {display:block; border:0;}
a.clickbox b {display:block;}
a.clickbox {float:left; margin:0 15px 15px 0; display:inline;}
a.clickbox .lightbox {position:absolute; left:-9999px; top:0; 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:40%; margin-top:-150px;}
/* trigger for IE6 */
a.clickbox:active {direction:ltr;}
a.clickbox:active .lightbox {left:0; width:100%; height:100%;}
a.clickbox .lightbox:hover,
a.clickbox:focus .lightbox {position:fixed; left:0; width:100%; height:100%;}
a.clickbox .lightbox:hover .light,
a.clickbox:active .lightbox .light,
a.clickbox:focus .lightbox .light {background:#000; width:100%; height:100%; filter: alpha(opacity=75);
filter: progid:DXImageTransform.Microsoft.Alpha(opacity=75); opacity:0.75;
}
a.clickbox .lightbox:hover .box img,
a.clickbox:active .lightbox .box img,
a.clickbox:focus .lightbox .box img {border:2px solid #000; 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; font:normal 11px/18px verdana, sans-serif; width:400px; padding:0; margin:10px auto; text-align:center; text-decoration:none; color:#ddd;}
.clear {clear:left;}
a.clickbox i {display:block; width:16px; height:16px; position:fixed; right:-100px; top:0; z-index:500;}
a.clickbox .lightbox:hover i,
a.clickbox:active i,
a.clickbox:focus i {right:10px; top:10px; background:url(trees/close.gif);}
#close {display:block; position:fixed; width:16px; height:16px; right:10px; top:10px; 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:16px; height:16px; overflow:hidden; float:right; cursor:pointer; position:static; background:url(trees/close.gif);}
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="thumbholder"> <p>sharejs.com提醒您：点击缩略图，图片将会放大，显示在屏幕中间，点击右上角的关闭按钮可以退出。</p> <br /> <a class="clickbox" href="#url"> <img src="trees/th1.jpg" alt="" /> <b class="lightbox"> <b class="light"></b> <b class="box"> <img src="trees/t1.jpg" alt="" /> <span>Daffodil is a common English name, sometimes used now for all varieties, and is the chief common name of horticultural prevalence used by the American Daffodil Society.<br /><i></i></span> </b> </b> </a> <a class="clickbox" href="#url"> <img src="trees/th2.jpg" alt="" /> <b class="lightbox"> <b class="light"></b> <b class="box"> <img src="trees/t2.jpg" alt="" /> <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vitae sem orci, eget ultrices leo. Morbi nec nisl et odio vestibulum sodales.<br /><i></i></span> </b> </b> </a> <a class="clickbox" href="#url"> <img src="trees/th3.jpg" alt="" /> <b class="lightbox"> <b class="light"></b> <b class="box"> <img src="trees/t3.jpg" alt="" /> <span>Fusce interdum massa eget nibh viverra at tincidunt lectus tempor. Mauris orci tortor, sagittis a elementum in, consectetur a purus.<br /><i></i></span> </b> </b> </a> <a class="clickbox" href="#url"> <img src="trees/th4.jpg" alt="" /> <b class="lightbox"> <b class="light"></b> <b class="box"> <img src="trees/t4.jpg" alt="" /> <span>Un hac habitasse platea dictumst. Fusce sit amet lacus erat.<br /><i></i></span> </b> </b> </a> <a class="clickbox" href="#url"> <img src="trees/th5.jpg" alt="" /> <b class="lightbox"> <b class="light"></b> <b class="box"> <img src="trees/t5.jpg" alt="" /> <span>Ut rhoncus semper eleifend. Aenean lorem massa, varius nec volutpat in.<br /><i></i></span> </b> </b> </a> <a class="clickbox" href="#url"> <img src="trees/th6.jpg" alt="" /> <b class="lightbox"> <b class="light"></b> <b class="box"> <img src="trees/t6.jpg" alt="" /> <span>Duis diam lectus, vestibulum eget porta ut, aliquam ut urna.<br /><i></i></span> </b> </b> </a> <a class="clickbox" href="#url"> <img src="trees/th7.jpg" alt="" /> <b class="lightbox"> <b class="light"></b> <b class="box"> <img src="trees/t7.jpg" alt="" /> <span>Aliquam pretium risus eu ipsum eleifend euismod vitae at augue.<br /><i></i></span> </b> </b> </a> <a class="clickbox" href="#url"> <img src="trees/th8.jpg" alt="" /> <b class="lightbox"> <b class="light"></b> <b class="box"> <img src="trees/t8.jpg" alt="" /> <span>Etiam at mi ut diam accumsan congue.<br /><i></i></span> </b> </b> </a> <a class="clickbox" href="#url"> <img src="trees/th9.jpg" alt="" /> <b class="lightbox"> <b class="light"></b> <b class="box"> <img src="trees/t9.jpg" alt="" /> <span>Broin quis nibh vel dui vulputate bibendum vitae id tortor.<br /><i></i></span> </b> </b> </a> <a class="clickbox" href="#url"> <img src="trees/th10.jpg" alt="" /> <b class="lightbox"> <b class="light"></b> <b class="box"> <img src="trees/t10.jpg" alt="" /> <span>Mauris sit amet diam luctus justo faucibus facilisis.<br /><i></i></span> </b> </b> </a> <a class="clickbox" href="#url"> <img src="trees/th11.jpg" alt="" /> <b class="lightbox"> <b class="light"></b> <b class="box"> <img src="trees/t11.jpg" alt="" /> <span>Ut vitae quam tortor, quis tempor metus.<br /><i></i></span> </b> </b> </a> <a class="clickbox" href="#url"> <img src="trees/ph1.jpg" alt="" /> <b class="lightbox"> <b class="light"></b> <b class="box"> <img src="trees/p1.jpg" alt="" /> <span>Donec consectetur, nunc at luctus blandit, ipsum sapien varius turpis, nec ultrices nisl massa vel dui.<br /><i></i></span> </b> </b> </a> <a class="clickbox" href="#url"> <img src="trees/th13.jpg" alt="" /> <b class="lightbox"> <b class="light"></b> <b class="box"> <img src="trees/t13.jpg" alt="" /> <span>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.<br /><i></i></span> </b> </b> </a> <a class="clickbox" href="#url"> <img src="trees/th14.jpg" alt="" /> <b class="lightbox"> <b class="light"></b> <b class="box"> <img src="trees/t14.jpg" alt="" /> <span>Donec sed eros purus, nec congue urna.<br /><i></i></span> </b> </b> </a> <a class="clickbox" href="#url"> <img src="trees/th15.jpg" alt="" /> <b class="lightbox"> <b class="light"></b> <b class="box"> <img src="trees/t15.jpg" alt="" /> <span>Cras placerat purus sed turpis ultricies aliquam.<br /><i></i></span> </b> </b> </a> <a class="clickbox" href="#url"> <img src="trees/th16.jpg" alt="" /> <b class="lightbox"> <b class="light"></b> <b class="box"> <img src="trees/t16.jpg" alt="" /> <span>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.<br /><i></i></span> </b> </b> </a> <a class="clickbox" href="#url"> <img src="trees/th17.jpg" alt="" /> <b class="lightbox"> <b class="light"></b> <b class="box"> <img src="trees/t17.jpg" alt="" /> <span>It mattis sagittis sem auctor imperdiet. <br /><i></i></span> </b> </b> </a> <br class="clear" /> <p>You can also have a text link to the 'Clickbox' image :</p> <a class="clickbox" href="#url">Click to view palm tree<b class="lightbox"><b class="light"></b><b class="box"><img src="trees/t18.jpg" alt="" /><span>Vestibulum aliquet sagittis orci, eget sodales arcu vulputate non.<br /><i></i></span></b></b></a> <br /><br /><br /><br /> <div id="close"></div> </div>
