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

前端技术 2023/09/02 JavaScript

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

本文地址：https://www.stayed.cn/item/5482

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案