纯CSS实现Lightbox点击小图无刷新显示大图

最新推荐文章于 2017-07-09 09:59:11 发布
最新推荐文章于 2017-07-09 09:59:11 发布
阅读量671 收藏 1
点赞数
分类专栏： lightBox
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 
<html> 
<head>
<title>纯CSS实现Lightbox放大图片</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_mrc { 
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://p1.mb5u.com/texiao/1/20110225160439121.jpg" width="100" height="62"></a> 
<div id="light" class="white_mrc">
<a target="_blank" href="#">
<img border="0" src="http://p1.mb5u.com/texiao/20110225160439123.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>
qidiantianxia
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
使用lightbox插件实现图片预览功能
huaweichenai的博客
07-02 1283
lightbox插件可以实现图片的预览功能 lightbox插件的github地址：https://github.com/lokesh/lightbox2 lightbox插件的简单使用 一：引入linghtbox的js <script src="/js/jquery.min.js"></script> <script src="/lightbox/lightbox.js"></script> 二：引入linghtbox的css <lin
css-鼠标移上去显示大图
信守承诺,雕刻寂寞
09-23 2111
最终效果如图：  --------------------------------------------------css部分-----------------------------------#demo{overflow:hidden;;text-align:center;padding:10px;}#demo img{border:none;border:5px sol
ngx-lightbox:Lightbox2与>> 5的角度一起使用
05-14
Ngx-Lightbox 无需jQuery即可与新Angular一起使用的实现端口 版本 对于Angular 5、6、7，请使用ngx-lightbox 1.xx npm install ngx-lightbox@1.2.0 对于Angular> = 8，请使用ngx-lightbox 2.xx npm install ngx-lightbox@2.0.0 对于Angular 2、4，请使用 安装 npm install --save ngx-lightbox 更新您的angular.json { "styles": [ "./node_modules/ngx-lightbox/lightbox.css", ... ], } 用法 模块： 从ngx-lightbox导入LightboxModule import { LightboxModule } f
纯CSS Lightbox效果
High_Mount的专栏
09-25 912
<!-- .black_overlay{ display: none; position: absolute; top: 0%; left: 0%; width: 100%; height: 100%;
纯css的鼠标移上查看大图的效果
漠上风情的专栏
04-07 1357
 一个简单的效果，鼠标移到图片上就可以显示查看该图片的大图，完全用css写的，居中用到负边距居中方式。  代码：无标题文档<!-- * { margin:0; padding:0; } img {border:0;} #main_body { widt
用CSS防Lightbox实现点击小图无刷新显示大图代码
01-19
用CSS防Lightbox实现点击小图无刷新显示大图代码 代码简介： CSS的“Lightbox”是一个人见人爱的图片显示技术，她可以实现点击小图无刷新显示大图的功能。Discuz论坛就有这种功能，不过好像它还用有JS，这一款没有...
jQuery结合LightBox实现图片滚动 图片盒子.rar
07-10
图片盒子，图片滚动过程中，可通过控制按钮控制滚动方向，单击小图片后，在当前页无刷新显示出放大图片，结合LightBox可实现 渐变动画效果的图片放大效果，代码中引入了jquery，且代码中运用有HTML5/CSS3技术，...
HTML5点击放大图片的图片展示特效.rar
07-10
HTML5点击放大图片的图片展示特效，鼠标放在图片上，会显示出文字描述，若点击图片，则在当前页无刷新放大图片显示，类似Lightbox图片显示效果。本代码中可以设置点击直接显示原图，如果移动至下面则IE浏览器报错，...
点击小图片加载大图片 CSS代码下载.rar
07-10
网页上的点击小图片加载大图片 CSS仿Lightbox代码下载，无刷新加载大图片，Ajax图片放大效果，纯CSS Lightbox效果，无需任何的JavaScript代码即可实现，而且兼容IE、火狐、chrome等众多主流浏览器。
jQuery Lightbox 0.5 图片修饰插件
05-12
内容索引:脚本资源,jQuery,lightbox,jQuery插件,无刷新放大　jQuery Lightbox 图片显示效果修饰插件，可以帮你完成让网页上的图片无刷新放大，自动检测图片大小从而变换图片外框的大小，放大图片时候背景是灰色的，...
Sppro-Ng-Lightbox:动态注入的简单角形灯箱库
04-07
Ng-Sppro-Lightbox 一个简单的角度图像灯箱。 使用ComponentFactoryResolver并将组件直接注入DOM主体 安装 npm安装ng-sppro-lightbox 用法 //import lightbox service into componennt import { LightboxService } from "ng-sppro-lightbox"; //Inject service constructor( private _lightboxService: LightboxService ) {...} //Open lightbox this._lightboxService.open("https://images.pexels.com/photos/1987042/pexels-photo-1987042.jpeg?auto=co
css3半透明遮罩lightbox效果.zip
07-03
css3半透明遮罩lightbox效果是一款纯css3实现的精美Lightbox特效。这个lightbox效果共有三种展示图片的效果：渐隐效果，淡入淡出效果和全屏放大在缩小效果。
css-lightbox:仅使用CSS制作的简单灯箱效果
05-16
＃简单的灯箱效果####仅使用CSS制作 一个仅由html和CSS制作的简单灯箱。 演示： :
CSS3实现鼠标移动到图片上图片变大（缓慢变大，有过渡效果，放大的过程是有动画过渡的，这个过渡的时间可以自定义）
05-30
CSS3实现鼠标移动到图片上图片变大（缓慢变大，有过渡效果，放大的过程是有动画过渡的，这个过渡的时间可以自定义） CSS3的transform:scale()可以实现按比例放大或者缩小功能。 CSS3的transition允许CSS的属性值在一定的时间区间内平滑地过渡。这种效果可以在鼠标单击、获得焦点、被点击或对元素任何改变中触发，并圆滑地以动画效果改变CSS的属性值。 参考文档： http://blog.csdn.net/u014175572/article/details/51535768
史上最简单的LightBox--Surance Box
02-29
基于JQuery的轻量级LightBox。特点是超级好用，超级好看懂.作者：Surance http://www.fltek.com.cn=====================Lightbox”是一个别致且易用的弹出页面/图片显示效果，它可以使弹出窗口或者图片直接呈现在当前页面之上而不用转到新的窗口。类似于WinXP操作系统的注销/关机对话框，除去屏幕中心位置的对话框，其他的区域都以淡出的效果逐渐变为银灰色以增加对比度，此时除了对话框内的表单控件，没有其他区域可以获取焦点。
Html 点击小图查看大图
无论何时都不要停止学习，这是改变自己的必要条件
01-11 2万+
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head&...
【CSS】选择大图中的小图片效果
大海的博客
07-09 406
CSS代码 .test #erweima { background-image: url(img/s0.meituan.net.png); background-repeat: no-repeat; background-position: -114px -807px; width: 75px; height: 75px; } .test #
CSS实现图片放大缩小的几种方法
热门推荐
那些年写过的代码
07-26 9万+
CSS实现图片方法缩小
漂亮的LightBox图片画廊插件开发
Pan Fengshan的博客
08-10 2261
今天给大家带来的是LightBox图片画廊插件的实现方法，用jQuery制作出一款简洁、漂亮的图片画廊，下面我们先看一下实现的效果： 这是我们最终实现的效果图，点击小图片之后弹出的对应的大图，中间有过渡动画，效果非常好看。下面我们来看一下LightBox插件的实现方法 一、首先我们要引入jQuery，我这里用的是2.1.1版本的 src="js/jquery-2.1.1.js">
jquery和css3炫酷图片画廊lightbox特效插件
最新发布
05-13
图片画廊Lightbox特效插件利用了jQuery和CSS3的特性，实现了一系列独特的功能。其中，最为突出的莫过于Lightbox效果，它会在用户点击图片时，以弹框的形式展示图片，同时将网页的背景变暗，从而凸显图片的重要性。...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值