基于JavaScript实现图片点击弹出窗口而不是保存


Posted in Javascript onFebruary 06, 2016

一直想给安装一个缩略图点击弹出的插件,但是找了找几乎都是用的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实现图片点击弹出窗口而不是保存的相关知识能够帮助到大家。

Javascript 相关文章推荐
JQuery 动画卷页 返回顶部 动画特效(兼容Chrome)
Feb 15 Javascript
一个简单的JavaScript数据缓存系统实现代码
Oct 24 Javascript
jQuery实现 注册时选择阅读条款 左右移动
Apr 11 Javascript
在JavaScript中实现类的方式探讨
Aug 28 Javascript
js获取多个tagname的节点数组
Sep 22 Javascript
js函数在frame中的相互调用详解
Mar 03 Javascript
Bootstrap每天必学之按钮(一)
Nov 24 Javascript
Javascript技术难点之apply,call与this之间的衔接
Dec 04 Javascript
Bootstrap每天必学之导航条(二)
Mar 01 Javascript
React Native实现地址挑选器功能
Oct 24 Javascript
如何在Angular8.0下使用ngx-translate进行国际化配置
Jul 24 Javascript
微信小程序使用蓝牙小插件
Sep 23 Javascript
javascript+css3 实现动态按钮菜单特效
Feb 06 #Javascript
Angularjs全局变量被作用域监听的正确姿势
Feb 06 #Javascript
JavaScript仿商城实现图片广告轮播实例代码
Feb 06 #Javascript
简介AngularJS中$http服务的用法
Feb 06 #Javascript
详解AngularJS中$http缓存以及处理多个$http请求的方法
Feb 06 #Javascript
JavaScript中数组添加值和访问值常见问题
Feb 06 #Javascript
详解Angularjs filter过滤器
Feb 06 #Javascript
You might like
sourcesafe管理phpproj文件的补充说明(downmoon)
2009/04/11 PHP
ajax+php打造进度条代码[readyState各状态说明]
2010/04/12 PHP
页面乱码问题的根源及其分析
2013/08/09 PHP
PHP中鲜为人知的10个函数
2014/02/28 PHP
php数组添加元素方法小结
2014/12/20 PHP
PHP查看SSL证书信息的方法
2016/09/22 PHP
详解PHP中foreach的用法和实例
2016/10/25 PHP
JavaScript高级程序设计 阅读笔记(十三) js定义类或对象
2012/08/14 Javascript
jQuery Ajax中的事件详细介绍
2015/04/16 Javascript
jQuery实现checkbox全选的方法
2015/06/10 Javascript
JS函数的几种定义方式分析
2015/12/17 Javascript
基于JavaScript实现动态创建表格和增加表格行数
2015/12/20 Javascript
javascript中select下拉框的用法总结
2016/01/07 Javascript
JavaScript的兼容性与调试技巧
2016/11/22 Javascript
vue组件化中slot的基本使用方法
2019/05/01 Javascript
JavaScript之Blob对象类型的具体使用方法
2019/11/29 Javascript
微信小程序 自定义弹窗实现过程(附代码)
2019/12/05 Javascript
[18:20]DOTA2 HEROS教学视频教你分分钟做大人-昆卡
2014/06/11 DOTA
Python金融数据可视化汇总
2017/11/17 Python
pygame游戏之旅 如何制作游戏障碍
2018/11/20 Python
Python开发网站目录扫描器的实现
2019/02/21 Python
Django框架中间件(Middleware)用法实例分析
2019/05/24 Python
Python实现鼠标自动在屏幕上随机移动功能
2020/03/14 Python
爱游人:Travelliker
2017/09/05 全球购物
WWE美国职业摔角官方商店:WWE Shop
2018/11/15 全球购物
美国领先的低折扣旅行网站:Hotwire
2019/01/19 全球购物
日本热销NO.1胶原蛋白冻:Aishitoto爱希特多
2019/06/20 全球购物
设计师大码女装:11 Honoré
2020/05/03 全球购物
什么样的创业计划书可行性高?
2014/02/01 职场文书
语文教研活动总结
2014/07/02 职场文书
法院授权委托书范文
2014/08/02 职场文书
网吧七夕活动策划方案
2014/08/31 职场文书
Jupyter notebook 更改文件打开的默认路径操作
2021/05/21 Python
解析Java异步之call future
2021/06/14 Java/Android
html form表单基础入门案例讲解
2021/07/15 HTML / CSS
Golang 实现WebSockets
2022/04/24 Golang