酷站(www.ku0.com)-致力于为互联网从业者提供动力!

热门关键词:  企业  as  baidu  c4rp3nt3r  美女
酷站

【云小站】新老客都返现+现金红包+瓜分60万奖池
酷站

css

旗下栏目: html css xml html5 DW bootstrap Frontpage教程

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

来源:转载 作者:秩名 人气: 发布时间:2019-09-10
本篇文章主要介绍了用CSS防Lightbox实现点击小图无刷新显示大图的代码教程,对大家的学习或者工作具有一定的参考学习价值,感兴趣的小伙伴们可以参考一下,也感谢大家对酷站(ku0.com)的支持。

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

代码简介:

CSS的“Lightbox”是一个人见人爱的图片显示技术,她可以实现点击小图无刷新显示大图的功能。Discuz论坛就有这种功能,不过好像它还用有JS,这一款没有用到JS,完全用纯CSS实现,而且用起来非常方便。

注意,图片的边框和大小这个根据你的网页布局自己设置一下,这里只是演示一下,不一定正好适合你的网页。


代码内容:
 

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 
<html> 
<head>
<title>用CSS防Lightbox实现点击小图无刷新显示大图代码 - www.webdm.cn</title> 
<style> 
.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;
     
}
</style> 
</head> 
<body> 
<p class="codefans_net">CSS的“Lightbox”是一个人见人爱的图片显示技术,可以实现点击小图无刷新显示大图的功能,如果你
 
不是太理解这种效果,你可以点击下边的图片就会明白了!<br>
<a href = "javascript:void(0)" onclick = "document.getElementById
 
('light').style.display='block';document.getElementById('fade').style.display='block'"><img  border="0" 
 
src="http://www.webdm.cn/images/20091006/demoimgsmall.jpg" width="100" height="62"></a> 
<div id="light" class="white_content">
<a target="_blank" href="/">
<img border="0" src="http://www.webdm.cn/images/20091006/demoimg.jpg" width="350" height="216"></a> <a href = 
 
"javascript:void(0)" onclick = "document.getElementById('light').style.display='none';document.getElementById
 
('fade').style.display='none'">关闭</a></div> 
<div id="fade" class="black_overlay"></div></p>
</body> 
</html>
<br />
<p><a href="http://www.webdm.cn">网页代码站</a> - 最专业的网页代码下载!
 
</p>

版权声明:本文内容来源于互联网或用户自行发布贡献,该文观点仅代表原作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 959677720#qq.cn(#换@) 举报,一经查实,本站将立刻删除。
原文链接:https://www.jb51.net/css/692313.html

相关文章

  • border-radius IE8兼容处理的方法介绍

    border-radius IE8兼容处理的方法介绍

    根据canisue( http://caniuse.com/#search=border-radius ),border-radius兼容性如下图所示: 测试代码: !DOCTYPE htmlhtml head meta charset=UTF-8 meta http-equiv=X-UA-Compatible content=IE=edge,chrome=1 title/title style t......
    02-13
  • css实现3d立体魔方

    css实现3d立体魔方

    今天来做一个简单的3d魔方 先看效果图吧!把这个看会了,一些网上的3d的相册你就都会了 一,html代码 !DOCTYPE htmlhtml lang=zh-CN head title3d立体魔方/title meta charset=UTF-8 /head body div class=top/div !--上 -- div class=bo......
    02-07
  • 详解css实现环形/扇形菜单(基础版)

    详解css实现环形/扇形菜单(基础版)

    项目需要用到环形菜单,初略在网上找了一下,没有找到合适的,于是自己写了一个很简单的,后续再优化。 这个组件是基于react,但是原理都一样。 展开效果如下: 实现 css(less) @centerIconSize: 30px; .flex(@justify: flex-start, @alig......
    01-16
  • 26个常用易忘CSS小技巧介绍

    26个常用易忘CSS小技巧介绍

    收集于平时常用但易忘的CSS实现方法,如有遗漏或补充,还请指正! 解决inline-block元素设置overflow:hidden属性导致相邻行内元素向下偏移 .wrap { display: inline-block; overflow: hidden vertical-align: bottom}.wrap { display: in......
    12-31
  • flex布局中flex-grow与flex-shrink的计算方式解析

    flex布局中flex-grow与flex-shrink的计算方式解析

    CSS 中的 Flex(弹性布局) 可以很灵活的控制网页的布局,其中决定 Flex 布局内项目宽度/高度的是三个属性:flex-basis, flex-grow, flex-shrink. flex-basis flex-basis 决定了项目占据主轴的空间,除非使用 box-sizing 进行设置,否则它......
    12-18
  • better-scroll实现菜单和内容联动的效果

    better-scroll实现菜单和内容联动的效果

    1、基本使用 !DOCTYPE htmlhtml lang=enhead meta charset=UTF-8 meta name=viewport content=width=device-width, initial-scale=1.0 meta http-equiv=X-UA-Compatible content=ie=edge titleDocument/title link href=https://unpkg.co......
    12-09
  • CSS边框长度控制成果的实现

    CSS边框长度控制成果的实现

    以前需要 边框 长度比容器小一些时,我用div嵌套。厥后发明伪类在实现这个效果时很方便,,只需要一个div就够了,另外调解padding和margin都不会很麻烦。 div class=content-blockdiv class=box-containerdiv class=border-topborder top......
    11-29
  • CSS3实现图片抽屉式效果的方法

    CSS3实现图片抽屉式效果的方法

    老规矩,先放图片效果图: 这个效果实现原理很简单:只要你掌握css3动画和过渡相关知识就行,不用js代码; HTML代码: div ul id=list li a href=国际美妆抢先看/a img src=images/1.jpg / /li li a href=女神标准大讨论/a img src=image......
    11-07
  • css :not的多个条件的写法

    css :not的多个条件的写法

    :not 伪类选择器可以筛选不符合表达式的元素 例子 table tbody tr:not(:first-child):not(:last-child) td{ text-align: right;} 以上代码可以选择table表格中tbody部分非首个、非最后一个的tr,并设置其子元素td文本样式居右 这里面需要......
    11-07
  • css的空格处理的方法

    css的空格处理的方法

    1、空格规则 HTML 代码的空格通常会被浏览器忽略。 p hello world /p 上面是一行 HTML 代码,文字的前部、内部和后部各有两个空格。 浏览器的输出结果如下: hello world 可以看到,文字的前部和后部的空格都会忽略,内部的连续空格只会算......
    11-05

最新更新