纯Javascript实现图片点击弹出_html/css_WEB-ITnose

WBOY
Lepaskan: 2016-06-24 11:27:21
asal
1628 orang telah melayarinya

一直想给安装一个缩略图点击弹出的插件,但是找了找几乎都是用的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%;\    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:50%;\    top:50%;\    margin-left:-250px;\    margin-top:-100px;\    z-index:1002;\}';    /*收集页面所有图片对象*/    for(i=0; i<img s.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);    light.setAttribute("id", "light");    light.setAttribute("class", "pic_div");    light.style.display = 'block';    light.appendChild(s_pic);    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 alt="纯Javascript实现图片点击弹出_html/css_WEB-ITnose" >
Salin selepas log masuk

将这段代码保存在页面的head中,再将body的onload事件绑定到picHook()函数,你的页面中就也可以实现图片点击弹出大图啦。

还存在一点小bug,主要是因为我不太熟悉css,导致div的样式做的有点难看。

css的样式我是直接声明在js里的,这样就不用再另外创建css文件了。

强迫症,没办法。

等有时间再琢磨琢磨css,优化下样式。

喜欢就拿去吧。

你可以点击下面的图片测试一下看看效果:

sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan