JS实现点击图片可弹出大图

如题,使用Javascript,实现点击图片可弹出大图,大图可关闭?
新手求问!
谢谢

2个回答

你说的是lightBox效果吧 ? 给你段代码:

 <!DOCTYPE html>
<meta charset="utf-8">
<html>
<head>
    <title>Lightbox效果</title>
    <style type="text/css">
    .black_overlay{
        display: none;
        position: absolute;
        top: 0%;left: 0%;
        width: 100%;
        height: 100%;
        background-color: black;
        z-index: 1001;
        opacity: .70;
    }
    .white_content{
        display: none;
        position: absolute;
        top: 30%;
        left: 30%;
        width: 40%;
        height: 40%;
        padding: 16px;
        border: 16px solid orange;
        background-color: white;
        z-index: 1002;
        overflow: auto;
    }
</style>
</head>
<body>
<a href="javascript:void(0)" 
    onclick="document.getElementById('light').style.display='block';
    document.getElementById('fade').style.display='block'">请单击这里</a>

<div id="light" class="white_content">
    这里是lightbox的弹出框的内容
<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>
</body>
</html>
CSDNZZMM
csdnZZMM 谢谢
大约一年之前 回复

fancybox

visuallightbox

colorbox等等。。

Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
其他相关推荐
点击图片弹出大图
JS点击图片弹出大图,JS弹出图片 非常好用
js点击小图弹出大图
点击缩略图弹出大图 导入文件后需加入 $(function () { $("a.single_image").fancybox(); });
bootstrap 点击图片弹出大图
效果: 在一个table里显示很多的小图,每点击一个图片,显示一张大图。 小图的html <td><img height='120px' width='200px' src="{$vo['img']}?imageView2/1/w/200/h/120" onclick="showBigImg('{$vo['img']}')"/></td> 图片的url来自TP的模板替换 图片的末尾的?imageV
jq实现点击图片弹出大图
jq实现点击图片弹出大图
js 图片 点击查看大图
js 点击图片查看大图 备注:其中一些引用文件没法上传,如果有需要的私信即可; 人工充值 --> body{ width: 97%; margin: auto; } .weixin_ceshi { float: left; text-align: center; width: 50%;   position: relativ
jquery-imgbox点击图片弹出大图.rar
jquery-imgbox 点击图片打开大图 修改了不支持高版本jquery的bug
记录一下点击图片弹出大图
需引入jQuery小图:&amp;lt;img class=&quot;simg&quot; src=&quot;&quot; &amp;gt;大图的div:&amp;lt;div id=&quot;outerdiv&quot; style=&quot;position:fixed;top:0;left:0;background:rgba(0,0,0,0.7);z-index:2;width:100%;height:100%;display:none;&quot;&amp;gt; &amp;lt;d
jquery 实现点击缩略图弹出大图
采用jquery 实现点击缩略图弹出大图,可以应用在DataList中
点击图片列表显示大图,点击大图大图消失
1.新建一个类,继承PopupWindow,整体是这样的 public class SortBigImagePopwindow extends PopupWindow { private ImageView imageView; private View mMenuView; private LinearLayout ll_back; public SortB...
点击图片查看大图
 记录一下,主要是css: .OCR_model { display: none; position: fixed; z-index: 1111; padding-top: 100px; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; ...
jquery点击缩略图弹出大图
脚本简介jquery点击缩略图弹出大图特效是一款带展开更多以及收起更多按钮,点击缩略图背景透明弹出层显示大图网页特效,代码简洁易用。
点击小图 弹出大图功能
现在做一个上传图片的功能.选择完后在img中显示小图 然后点击img 弹出一个窗口用于显示这个图片的大图rn但是图片有大有小.我怎么样来根据图片的大小来弹出窗口的大小.并在窗口中显示这个图片的原图呢.rn帮忙想想有什么好的方法没 谢谢
jquery点击小图弹出大图
使用jquery插件实现点击小图弹出大图的效果,灰常好用,不错的,效果很好。
点击图片弹出大图 滚动鼠标控制图片
点击图片在当前窗口弹出大图 滚动鼠标控制图片大小
在gridview中点击图片实现查看大图
我想实现类似于点击图片实现可以查看大图!类似于现在QQ空间里面的那个好友发布心照片,自己可以通过点击实现查看大图的那种效果,,,我现在是在数据库存储的是两种图片的imageurl 大图和小图。请教各位高手如何实现,最好详细一点,我比较笨而且又刚接触没多久,谢谢
点击图片弹出视频实现
使用jQuery插件FancyBox实现
点击出现图片大图效果
&amp;lt;style&amp;gt;#demo{overflow:hidden;width:120px;text-align:center;padding:10px;}#demo img{border:none;width:100px;height:100px;}#enlarge_images{position:absolute;display:none;z-index:2;}&amp;lt;/style&amp;gt;&amp;...
js点击小图弹出大图查看代码.zip
Js点击小图弹出大图查看代码是一款原生js图片相册代码。
jQuery图片相册点击弹出大图预览.zip
jQuery图片相册点击弹出大图预览是一款缩略图排列,鼠标点击小图的时候弹出层显示大图,带切换按钮。
js实现大图显示
[code=&quot;java&quot;] New Document $(function(){ $(&quot;.pimg&quot;).click(function(){ var _this = $(this);//将当前的pimg元素作为_this传入函数 imgShow(&quot;#outerdiv&quot;, &quot;#inn...
js 实现 可拖动的图片
js 实现 可拖动的图片! 值得下载看看!资源免费,大家分享!!
jQuery点击弹出大图照片画廊代码
照片列表,点击照片能弹出框放大照片,并能自动播放照片
点击Gallery弹出对应的Gallery大图
今天遇到了这么一个问题,给3个相应的缩略图,点击缩略图弹出的相应的缩略图片的大图。 解决办法:setSelection,注意这个方法是Gallery的。(下面代码功能:缩略图可以左右滑动;弹出大图可以左右滑动;点A缩略图,显示A大图。点击B大图,显示B大图。并且 不影响滑动) 代码:我的代码有点长,如果你已经有思路,就直接去百度一下setSelection(); 1. xml
jquery点击缩略图弹出大图特效.zip
jquery点击缩略图弹出大图特效是一款带展开更多以及收起更多按钮,点击缩略图背景透明弹出层显示大图网页特效,代码简洁易用。
js实现点击图片的切换
点击图片切换为另一个图片,再点击后又会变为原来的图片&amp;lt;img src=&quot;images/del.png&quot; id=&quot;img&quot;&amp;gt;&amp;lt;script&amp;gt;var image=document.getElementById('img');image.onclick=function (){var mysrc=image.getAttribute('src');if(mysrc=='image...
js 点击图片 实现功能
rnrn rnrnrn rn rn rn rn rn rnrnrn这是一段JS实现秒表功能的代码,如果现在我想用图片来代替代码中按钮部分要怎么做的?rn另外想加一个暂停的功能...rn请各位大侠赐教啊~~~急~~~
Android 实现WebView点击图片查看大图列表及图片保存
在日常开发过程中,有时候会遇到需要在app中嵌入网页,此时使用WebView实现效果,但在默认情况下是无法点击图片查看大图的,更无法保存图片。本问将就这一系列问题的实现进行说明。 项目的知识点: 1.加载网页后如何捕捉网页中的图片点击事件; 2.获取点击的图片资源后进行图片显示,获取整个页面所有的图片; 3.支持查看上下一张的图片以及对图片缩放显示; 4.对图片进行保存;
jQuery实现点击小图弹出大图代码
jQuery实现点击小图弹出大图代码 源代码 包括JS代码 图片
小图点击弹出大图插件引用
小图点击弹出大图插件引用 插件引用:     zoom.css     zoom.min.js 图片三张:arrows、close、loading html:
jquery点击小图弹出大图效果
jquery点击小图弹出大图效果
JavaScript图片廊——实现点击小图片栏显示大图
 显示小图列表的方法是eg.showThumb(),单击小图要显示大图,需要调用eg.showBig()方法,只有单击小图片时候响应单击事件才行,所以需要用eg.addListenner()方法实现,这个方法是一个跨浏览器绑定事件函数 element.addEventListener(event, function, useCapture); 第一个参数是事件的类型 (如 &quot;click&quot;...
原生JS点击小图弹出大图代码.zip
原生JS点击小图弹出大图代码是一款支持点击左右按钮切换大图,支持是否显示分页控件。
jquery点击弹出大图切换代码.zip
jquery点击弹出大图切换代码是一款jquery相册图片滑动切换点击弹出大图片切换预览效果代码。
点击图片,弹出放大图片
我的图片按一定比例缩小读入到image控件中,下面有一个“查看图片”按钮Button1,点击此按钮,弹出原图!请教思路和实现方法啊!
【JS】点击弹出DIV
JS+CSS实现带关闭按钮的DIV弹出窗口 &lt;html&gt; &lt;head&gt; &lt;title&gt;JS+CSS实现带关闭按钮的DIV弹出窗口&lt;/title&gt; &lt;script&gt; function locking(){ document.all.ly.style.display="block"; document.a...
点击图片弹出视频
再分享弹出视频代码前,雯雯木先道个歉,比原先说的推迟了几天主要是前几天手里项目急,没抽出来时间,废话不多说了,本木头开始分享之旅程。 头标签:    $(function(){  $("#demoBtn1").click(function(){       $('#demo1').layerModel({  blurClose : true  });  
js源生实现图片点击弹出放大效果
参考https://blog.csdn.net/qq_36375934/article/details/78952485 的弹出框查看大图,同时总结自己遇到的问题,做个笔记 HTML代码 &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta...
点击弹出图片
//main package com.bwei.cellphonedemo; import android.animation.AnimatorSet; import android.animation.ObjectAnimator; import android.os.Bundle; import android.support.v7.app.AppCompatActivity; imp
js实现图片点击弹出放大效果(无插件)
HTML代码&amp;lt;!doctype html&amp;gt; &amp;lt;html lang=&quot;en&quot;&amp;gt; &amp;lt;head&amp;gt; &amp;lt;meta charset=&quot;UTF-8&quot;&amp;gt; &amp;lt;title&amp;gt;Document&amp;lt;/title&amp;gt; &amp;lt;/head&amp;gt; &amp;lt;body&amp;gt; &amp;lt;
点击查看大图怎么实现
需要用ajax吗
相关热词 c++和c#哪个就业率高 c# 批量动态创建控件 c# 模块和程序集的区别 c# gmap 截图 c# 验证码图片生成类 c# 再次尝试 连接失败 c#开发编写规范 c# 压缩图片好麻烦 c#计算数组中的平均值 c#获取路由参数