这篇文章主要介绍了基于 JavaScript 实现图片点击弹出窗口而不是保存的相关资料, 需要的朋友可以参考下
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
一直想给安装一个缩略图点击弹出的插件,但是找了找几乎都是用的 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<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);
- 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>
将这段代码保存在页面的 head 中,再将 body 的 onload 事件绑定到 picHook() 函数,你的页面中就也可以实现图片点击弹出大图啦。
还存在一点小 bug,主要是因为我不太熟悉 css,导致 div 的样式做的有点难看。
css 的样式我是直接声明在 js 里的,这样就不用再另外创建 css 文件了。
等过了这个节再琢磨琢磨 css,优化下样式。希望本文给大家分享的 JavaScript 实现图片点击弹出窗口而不是保存的相关知识能够帮助到大家。
来源: http://www.phperz.com/article/17/0219/267193.html