Javascript实现图片点击弹出

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Javascript实现图片点击弹出相关的知识,希望对你有一定的参考价值。

一直想给安装一个缩略图点击弹出的插件,但是找了找几乎都是用的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实现图片点击弹出的主要内容,如果未能解决你的问题,请参考以下文章

php制作后台,上传图片,点击上传,弹出一个图片库,从图片库里面选择图片,如何实现?

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

如何再点击登录按钮后, 弹出如图所示的对话框? 用JAVASCRIPT怎么实现?

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

Android:将片段和弹出窗口的点击事件中生成的变量传递给活动的方法

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