基于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 相关文章推荐
JavaScript窗口功能指南之在窗口中书写内容
Jul 21 Javascript
非常漂亮的JS代码经典广告
Oct 21 Javascript
jQuery 行背景颜色的交替显示(隔行变色)实现代码
Dec 13 Javascript
jquery attr 设定src中含有&amp;(宏)符号问题的解决方法
Jul 26 Javascript
开发插件的两个方法jquery.fn.extend与jquery.extend
Nov 21 Javascript
分享一款基于jQuery的视频播放插件
Oct 09 Javascript
jQuery的animate函数实现图文切换动画效果
May 03 Javascript
JavaScript实现时间倒计时跳转(推荐)
Jun 28 Javascript
jQuery实现自动输入email、时间和域名的方法
Aug 24 Javascript
Vue2.0表单校验组件vee-validate的使用详解
May 02 Javascript
Vue2单一事件管理组件通信
May 09 Javascript
认识less和webstrom的less配置方法
Aug 02 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中的escape函数
2013/06/29 PHP
php实现水仙花数示例分享
2014/04/03 PHP
ThinkPHP连接数据库及主从数据库的设置教程
2014/08/22 PHP
php中namespace及use用法分析
2016/12/06 PHP
学习ExtJS(二) Button常用方法
2009/10/07 Javascript
jQuery的链式调用浅析
2010/12/03 Javascript
JavaScript原型链示例分享
2014/01/26 Javascript
自编jQuery插件实现模拟alert和confirm
2014/09/01 Javascript
js兼容火狐获取图片宽和高的方法
2015/05/21 Javascript
node.js express安装及示例网站搭建方法(分享)
2016/08/22 Javascript
JavaScript之promise_动力节点Java学院整理
2017/07/03 Javascript
基于react组件之间的参数传递(详解)
2017/09/05 Javascript
Vue2.0系列之过滤器的使用
2018/03/01 Javascript
vue悬浮可拖拽悬浮按钮的实例代码
2019/08/20 Javascript
vue实现输入框的模糊查询的示例代码(节流函数的应用场景)
2019/09/01 Javascript
Vue监听滚动实现锚点定位(双向)示例
2019/11/13 Javascript
在vue和element-ui的table中实现分页复选功能
2019/12/04 Javascript
[03:56]显微镜下的DOTA2第十一期——鬼畜的死亡先知播音员
2014/06/23 DOTA
[33:17]OG vs VGJ.T 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
Python删除指定目录下过期文件的2个脚本分享
2014/04/10 Python
python操作gmail实例
2015/01/14 Python
浅谈对yield的初步理解
2017/05/29 Python
numpy实现合并多维矩阵、list的扩展方法
2018/05/08 Python
Python爬虫实现验证码登录代码实例
2019/05/10 Python
在脚本中单独使用django的ORM模型详解
2020/04/01 Python
适合各种场合的美食礼品:Harry & David
2016/08/03 全球购物
一家专门做特卖的网站:唯品会
2016/10/09 全球购物
JPA的优势都有哪些
2013/07/04 面试题
旅游管理专业学生求职信
2013/09/28 职场文书
怎样写离婚协议书
2014/09/10 职场文书
机票销售员态度不好检讨书
2014/09/27 职场文书
2014年会计个人工作总结
2014/11/24 职场文书
皇城相府导游词
2015/02/06 职场文书
《鲸》教学反思
2016/02/23 职场文书
JAVA API 实用类 String详解
2021/10/05 Java/Android
MySQL分区路径子分区再分区
2022/04/13 MySQL