基于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如何判断输入的url是否正确
Apr 11 Javascript
Node.js中的模块机制学习笔记
Nov 04 Javascript
JavaScript数据类型详解
Apr 01 Javascript
JQuery实现鼠标滚轮滑动到页面节点
Jul 28 Javascript
jquery实现点击变换导航样式的方法
Aug 31 Javascript
JQuery实现简单的图片滑动切换特效
Nov 22 Javascript
概述VUE2.0不可忽视的很多变化
Sep 25 Javascript
微信小程序使用checkbox显示多项选择框功能【附源码下载】
Dec 11 Javascript
解决Vue.js 2.0 有时双向绑定img src属性失败的问题
Mar 14 Javascript
AngularJS使用$http配置对象方式与服务端交互方法
Aug 13 Javascript
怎样在vue项目下添加ESLint的方法
May 16 Javascript
Vue 微信端扫描二维码苹果端却只能保存图片问题(解决方法)
Jan 19 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
德生H-501的评价与改造
2021/03/02 无线电
用php写的serv-u的web申请账号的程序
2006/10/09 PHP
DEDE实现转跳属性文档在模板上调用出转跳地址
2016/11/04 PHP
详解PHP多个进程配合redis的有序集合实现大文件去重
2019/03/06 PHP
为javascript添加String.Format方法
2020/08/11 Javascript
JavaScript 事件冒泡简介及应用
2010/01/11 Javascript
jQuery 操作option的实现代码
2011/03/03 Javascript
Jquery中$.get(),$.post(),$.ajax(),$.getJSON()的用法总结
2013/11/14 Javascript
js如何判断用户是否是用微信浏览器
2014/06/05 Javascript
JS小游戏之极速快跑源码详解
2014/09/25 Javascript
bootstrap table 服务器端分页例子分享
2015/02/10 Javascript
省市区三级联动下拉框菜单javascript版
2015/08/11 Javascript
javascript同步服务器时间和同步倒计时小技巧
2015/09/24 Javascript
基于Jquery和CSS3制作数字时钟附源码下载(CSS3篇)
2015/11/24 Javascript
JavaScript入门教程之引用类型
2016/05/04 Javascript
jQuery实现对无序列表的排序功能(附demo源码下载)
2016/06/25 Javascript
玩转NODE.JS(四)-搭建简单的聊天室的代码
2016/11/11 Javascript
JavaScript实现简单的树形菜单效果
2017/06/23 Javascript
JS实现的简单四则运算计算器功能示例
2017/09/27 Javascript
vue 运用mock数据的示例代码
2017/11/07 Javascript
vue自定义指令directive实例详解
2018/01/17 Javascript
vue组件入门知识全梳理
2020/09/21 Javascript
python中的内置函数getattr()介绍及示例
2014/07/20 Python
Python基于socket实现简单的即时通讯功能示例
2018/01/16 Python
Pycharm在创建py文件时,自动添加文件头注释的实例
2018/05/07 Python
python3使用smtplib实现发送邮件功能
2018/05/22 Python
pyqt5中QThread在使用时出现重复emit的实例
2019/06/21 Python
sklearn和keras的数据切分与交叉验证的实例详解
2020/06/19 Python
CSS伪类与CSS伪元素的区别及由来具体说明
2012/12/07 HTML / CSS
使用 CSS3 中@media 实现网页自适应的示例代码
2020/03/24 HTML / CSS
Java面试题:请问一下代码输出是什么
2015/05/27 面试题
shell的种类有哪些
2015/04/15 面试题
环保倡议书300字
2014/05/15 职场文书
电话营销开场白
2015/05/29 职场文书
OpenCV-Python模板匹配人眼的实例
2021/06/08 Python
Python PIL按比例裁剪图片
2022/05/11 Python