正文

javascript实现图片点击弹出

 2022-03-20  805

关键词：

一直想给安装一个缩略图点击弹出的插件，但是找了找几乎都是用的php来做的，插件的使用和安装极其繁琐，于是上网查了些demo，自己实现了一个纯js的图片弹出插件。

实现的思路是通过编写hook图片的onclick事件的函数，在函数中对body追加div元素，再将传入的图片对象放入元素中，同时再监听div的onclilck事件，当捕捉到点击，再关闭(其实是隐藏)弹出的div。
通过在函数初始化的时候收集页面所有的img元素，再为每个img元素增加onclick="picHook(this)"这条属性，这样当图片在被点击时，这个函数就能自动创建div蒙板背景，并获取被点击图片的宽度和高度，同时生成一个新的和图片一样大小的div来显示图片。当蒙板再次被点击时，hook事件再次响应，并将蒙板和图片div的style置为none，弹出的图片就被关闭了。
实现效果见本博客，任意点击一个图片即可查看效果。
说起来很简单，做起来就更简单了，简单到只需要一个函数即可实现。
talking is cheap，show you my code:

        <script>
        function picHook(pic){
        /*图片对象*/
        var imgs = document.getElementsByTagName("img");
        /*前景div*/
        var light   = document.getElementById('light')  || document.createElement("div");
        /*背景div*/
        var bg      = document.getElementById('bg')     || document.createElement("div");
        /*图片放大*/
        var s_pic   = document.getElementById('s_pic')  || document.createElement("img");
        /*css对象*/
        var css     = document.createElement("style");
        /*css样式*/
        var csstext = '
        .pic_bg{
            position: absolute;
            margin:0 auto; 
            top: 0%;
            left: 0%;
            right: 0%;
            width: 100%;
            padding-bottom: 1000%;
            background-color: black;
            z-index:1001;
            opacity:.80;
            filter: alpha(opacity=80);
            overflow:scroll;
        }
    
        .pic_div {            margin-bottom: auto;            position: fixed;            left:30%;            top:20%;            width: 100%;            padding-top:25px;            margin-left:-250px;            margin-top:-100px;            z-index:1002;        }';
        /*收集页面所有图片对象*/
        for(i=0; i<imgs.length;i++){
            imgs[i].setAttribute("onclick", "picHook(this)" );
        }
        css.type = "text/css";
        
        /*关闭图像*/
        if( !pic ){
            bg.style.display = light.style.display = "none";
        }
        
        /*ie兼容*/
        if(css.styleSheet){
            css.styleSheet.cssText = csstext;
        }else{
            css.appendChild(document.createTextNode(csstext));
        }
        
        s_pic.setAttribute("id", "s_pic");
        s_pic.setAttribute("src", pic.src);
        s_pic.setAttribute("width","70%");
        s_pic.setAttribute("height","65%");
        s_pic.setAttribute("margin","0 auto");
        s_pic.style.display = 'block';
        light.setAttribute("id", "light");
        light.setAttribute("class", "pic_div");
        light.style.display = 'block';
        light.appendChild(s_pic);
        light.setAttribute("onclick", "picHook()");
        bg.setAttribute("id", "bg");
        bg.setAttribute("class", "pic_bg");
        bg.setAttribute("onclick", "picHook()");
        bg.style.display = light.style.display;
        document.getElementsByTagName("head")[0].appendChild(css); 
        document.body.appendChild(bg);
        document.body.appendChild(light);
    }
    </script>

将这段代码保存在页面的head中，再将body的onload事件绑定到picHook()函数，你的页面中就也可以实现图片点击弹出大图啦。
还存在一点小bug，主要是因为我不太熟悉css，导致div的样式做的有点难看。
css的样式我是直接声明在js里的，这样就不用再另外创建css文件了。
强迫症，没办法。
等有时间再琢磨琢磨css，优化下样式。

javascript学习——完成页面定时弹出广告

...数”，3000);2、步骤分析（此案例页面定时弹出广告基于JavaScript学习——实现首页轮播图效果实现的）第一步：在页面指定位置隐藏一个广告图片(使用display属性的none值)第二查看详情

点击弹出固定大小的新窗口（js实现）

<SCRIPT LANGUAGE="javascript">  </SCRIPT> 固定大小：<SCRIPT LANGUAGE="javascript">& 查看详情

怎么用js实现图片点击时放大，再点击恢复

用JavaScript实现图片点击放大再次点击恢复代码如下：JavaScript一种直译式脚本语言，是一种动态类型、弱类型、基于原型的语言，内置支持类型。它的解释器被称为JavaScript引擎，为浏览器的一部分，广泛用于客户端的脚本语言，... 查看详情

使用javascript实现弹出层效果

声明阅读本文需要有一定的HTML、CSS和JavaScript基础设计实现弹出层效果的思路非常简单：将待显示的内容先隐藏，在触发某种条件后（如点击按钮），将原本隐藏的内容显示出来。实现 <!DOCTYPEhtml><html><head><titl... 查看详情

怎么用javascript实现自动点击由confirm弹出的对话框中的“确定”按钮？

...个网页游戏，可游戏中会弹出确定对话框，要怎样才能用JavaScript代码自动点击或直接跳过，实现真正的无人值守玩游戏？这个没有搞过，但是可以给个思路：在页面上添加下面的js试试，即把js自己的alert、confirm、prompt给覆盖掉... 查看详情

图片点击后出现模态框效果的实现

...口。这就是图片模态框效果。这个效果可以使用某些js库实现，如bpopupJs。但是在这里我们使用纯js实现，能够更好理解效果原理和实现方法。一.实现思路我们点击小图片之后,图片模态框出现，同时图片模态框上有一个关闭按钮... 查看详情

二十一天——打卡第十五天（javascript实现登录弹出框）(代码片段)

今天写个点击出现弹出框的效果。HTML：<h2>点击，弹出对话框</h2> <divid="login"> <h3>登录会员</h3> <divclass="yonghuming"><span>用户名：</sp 查看详情

通过 webdriver 点击 javascript 弹出窗口

】通过webdriver点击javascript弹出窗口【英文标题】：Clickthejavascriptpopupthroughwebdriver【发布时间】：2012-01-2717:24:18【问题描述】：我在Python中使用Seleniumwebdriver抓取网页我正在处理的网页有一个表格。我可以填写表格，然后点击提交... 查看详情

网页上如何实现点击一张图片弹出qq聊天窗口？

...该是调用电脑的软件。通过自动弹出QQ对话框的方法能够实现很高的客户咨询量，相比“左一个、右一个、中间再弹一个”的客服组查看详情

ueditor单独图片上传

...URL地址栏面点击确定的时候再吧信息发送到编辑器里面能实现吗？请大虾们帮帮搞定吧~参考技术A可以实现，我之前做过查看详情

js实现长按事件

参考技术A最近在做一个项目，点击一个按钮，弹出一张图片，长按图片保存图片，点击图片图片隐藏。在做的时候发现，当我们长按图片的时候也会执行点击图片的事件，这时候我们就需要判断长按事件和点击事件了。htmljs 查看详情

javascript点击button更换背景图片如何实现？

...; <script type="text/javascript"> setTimeout("validate()",24*60*60*1000); ... 查看详情

html中怎么点击图片弹出视频？

...; rel="stylesheet"> <script type="text/javascript" src="js/jquery.layerModel.js"></script><script type="text/javascript">$(function() $("#demoBtn1").click(function() &nbs... 查看详情

javascript中有几种模态框

JavaScript中常见的模态框有以下几种：1.alert：用于弹出一个警示框，只能显示一段文字信息和一个“确定”按钮。2.confirm：用于弹出带有确认和取消两个选项的对话框，用户点击确认返回true，点击取消返回false。3.prompt：用于弹... 查看详情

高分求教：如何实现javaweb按钮点击弹出登陆界面，并登陆

请看图片，用java实现点击登陆按钮，并在弹出的登陆界面上实现登陆简单的js就可以啊。在页面上写一个隐藏的div，里面放上登录用的表单，这个div是绝对定位在浏览器中间的，看起来比较好看。你还可以加个灰色透明的遮罩，... 查看详情

unity点击图片不弹出原图

...如下图所示的地方，其他按照要求进行设置：这样就可以实现，按钮调出自制弹出框的功能了。家常炸萝卜丸子的做法精选推荐广告unity自定义弹出框功能11下载·0评论2020年8月25日点击按钮随机显示一张图片.rar15下载... 查看详情

网页上点登陆弹出一个登录对话框使用啥技术实现的ajax吗？怎么做啊？急

使用JavaScript即可，仅仅是弹出对话框的话没有涉及到Ajax。具体做法，可以使用JavaScript给登陆按钮注册一个点击事件处理函数，当点击这个按钮的时候，就触发该函数，在这个函数中生成一个弹出层，该弹出层就是登陆对话框了... 查看详情

javascript，有很多个li，给每个li写同一个单击事件，怎么让它实现点击其中一个li，弹出对应的innerhtml.

我知道可以给每个li写不同事件，但是有很多个li呢？您好，您可以将声明放在函数外面。没必要写onclick属性在标签内varnr=document.getElementsByTagName('li');for(i=0;i<nr.length;i++)nr[i].onclick=function()alert(this.innerHTML )参考技术Aaler... 查看详情