基于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 相关文章推荐
用js实现键盘方向键翻页功能的代码
Jun 03 Javascript
javascript Zifa FormValid 0.1表单验证 代码打包下载
Jun 08 Javascript
jQuery的slideToggle方法实例
May 07 Javascript
jquery操作cookie插件分享
Jan 14 Javascript
jquery ajax,ashx,json的用法总结
Feb 12 Javascript
JavaScript替换当前页面的方法
Apr 03 Javascript
node.js+express制作网页计算器
Jan 17 Javascript
jQuery获取元素父节点的方法
Jun 21 Javascript
微信小程序授权获取用户详细信息openid的实例详解
Sep 20 Javascript
vue.js通过路由实现经典的三栏布局实例代码
Jul 08 Javascript
详解vuex之store源码简单解析
Jun 13 Javascript
OpenLayers3实现地图显示功能
Sep 25 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
用PHP动态生成虚拟现实VRML网页
2006/10/09 PHP
抓取YAHOO股票报价的类
2009/05/15 PHP
php 将excel导入mysql
2009/11/09 PHP
PHP 读取和编写 XML
2014/11/19 PHP
php使用explode()函数将字符串拆分成数组的方法
2015/02/17 PHP
再谈ie和firefox下的document.all属性
2009/10/21 Javascript
JavaScript中的Array对象使用说明
2011/01/17 Javascript
jQuery使用之标记元素属性用法实例
2015/01/19 Javascript
zepto.js中tap事件阻止冒泡的实现方法
2015/02/12 Javascript
javascript日期格式化方法汇总
2015/10/04 Javascript
BOM系列第三篇之定时器应用(时钟、倒计时、秒表和闹钟)
2016/08/17 Javascript
windows 下安装nodejs 环境变量设置
2017/02/02 NodeJs
原生js实现旋转木马轮播图效果
2017/02/27 Javascript
vue数据双向绑定的注意点
2017/06/23 Javascript
bootstrap datepicker插件默认英文修改为中文
2017/07/28 Javascript
聊聊Vue.js的template编译的问题
2017/10/09 Javascript
微信小程序上传图片实例
2018/05/28 Javascript
vue中使用input[type=&quot;file&quot;]实现文件上传功能
2018/09/10 Javascript
vue二级菜单导航点击选中事件的方法
2018/09/12 Javascript
nodejs更新package.json中的dependencies依赖到最新版本的方法
2018/10/10 NodeJs
详解Vue组件之间通信的七种方式
2019/04/14 Javascript
在vue中使用jsonp进行跨域请求接口操作
2020/10/29 Javascript
[57:31]DOTA2-DPC中国联赛 正赛 SAG vs CDEC BO3 第一场 2月1日
2021/03/11 DOTA
Python单例模式的两种实现方法
2017/08/14 Python
用TensorFlow实现lasso回归和岭回归算法的示例
2018/05/02 Python
Python叠加两幅栅格图像的实现方法
2019/07/05 Python
PyQt5通信机制 信号与槽详解
2019/08/07 Python
Python openpyxl读取单元格字体颜色过程解析
2019/09/03 Python
美国运动鞋类和服装零售连锁店:Shoe Palace
2019/08/13 全球购物
环保倡议书格式范文
2014/05/14 职场文书
计算机求职信
2014/07/02 职场文书
毕业生就业推荐表导师评语
2014/12/31 职场文书
2015年出纳工作总结与计划
2015/05/18 职场文书
php修改word的实例方法
2021/11/17 PHP
nginx中封禁ip和允许内网ip访问的实现示例
2022/03/17 Servers
Nginx利用Logrotate实现日志分割
2022/05/20 Servers