html点击刷新图片内容,用CSS防Lightbox实现点击小图无刷新显示大图代码

用CSS防Lightbox实现点击小图无刷新显示大图代码

代码简介：

CSS的“Lightbox”是一个人见人爱的图片显示技术，她可以实现点击小图无刷新显示大图的功能。Discuz论坛就有这种功能，不过好像它还用有JS，这一款没有用到JS，完全用纯CSS实现，而且用起来非常方便。注意，图片的边框和大小这个根据你的网页布局自己设置一下，这里只是演示一下，不一定正好适合你的网页。

代码内容：

用CSS防Lightbox实现点击小图无刷新显示大图代码 - www.webdm.cn

.black_overlay{

display: none;

position: absolute;

top: 0%;

left: 0%;

width: 100%;

height: 100%;

background-color: white;

z-index:1001;

-moz-opacity: 0.8;

opacity:.80;

filter: alpha(opacity=80);

}

.white_content {

display: none;

position: absolute;

top: 25%;

left: 25%;

width: 46%;

height: 50%;

padding: 13px;

border: 16px solid orange;

background-color: white;

z-index:1002;

overflow: auto;

}

.codefans_net

{

width:420px;

height:210px;

background-color:#efefef;

color:#666;

border-width:1px;

border-color:#999;

border-style:solid;

margin:6px;

padding:6px;

font-Size:14px;

line-height:200%;

float:midden;

}

CSS的“Lightbox”是一个人见人爱的图片显示技术，可以实现点击小图无刷新显示大图的功能，如果你

不是太理解这种效果，你可以点击下边的图片就会明白了！

('light').style.display='block';document.getElementById('fade').style.display='block'">

src="http://www.webdm.cn/images/20091006/demoimgsmall.jpg" width="100" height="62">

"javascript:void(0)" onclick = "document.getElementById('light').style.display='none';document.getElementById

('fade').style.display='none'">关闭

网页代码站 - 最专业的网页代码下载！

总结

以上所述是小编给大家介绍的用CSS防Lightbox实现点击小图无刷新显示大图代码,希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！

如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！