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 = ElementsByTagName("img");
/*前景div*/
var light  = ElementById('light')  || ateElement("div");
/*背景div*/
var bg      = ElementById('bg')    || ateElement("div");
/*图⽚放⼤*/
var s_pic  = ElementById('s_pic')  || ateElement("img");
/*css对象*/
var css    = ateElement("style");
/
*css样式*/
var csstext = '\
.pic_bg{\
position: absolute;\
margin:0 auto; \
top: 0%;\
left: 0%;\
right: 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:30%;\
top:20%;\
width: 100%;\
padding-top:25px;\
margin-left:-250px;\
margin-top:-100px;\
z-index:1002;\
}';
/*收集页⾯所有图⽚对象*/
for(i=0; i<imgs.length;i++){
imgs[i].setAttribute("onclick", "picHook(this)" );
}
/*关闭图像*/
if( !pic ){
bg.style.display = light.style.display = "none";
}
/*ie兼容*/
if(css.styleSheet){
css.styleSheet.cssText = csstext;
}else{
css.ateTextNode(csstext));
}
s_pic.setAttribute("id", "s_pic");
s_pic.setAttribute("src", pic.src);
s_pic.setAttribute("width","70%");
s_pic.setAttribute("height","65%");
s_pic.setAttribute("margin","0 auto");
s_pic.style.display = 'block';
light.setAttribute("id", "light");
light.setAttribute("class", "pic_div");
light.style.display = 'block';
light.appendChild(s_pic);
light.setAttribute("onclick", "picHook()");
bg.setAttribute("id", "bg");
bg.setAttribute("class", "pic_bg");
bg.setAttribute("onclick", "picHook()");
bg.style.display = light.style.display;
document.body.appendChild(bg);
document.body.appendChild(light);
}
</script>
将这段代码保存在页⾯的head中，再将body的onload事件绑定到picHook()函数，你的页⾯中就也可以实现图⽚点击弹出⼤图啦。还存在⼀点⼩bug，主要是因为我不太熟悉css，导致div的样式做的有点难看。
css的样式我是直接声明在js⾥的，这样就不⽤再另外创建css⽂件了。
强迫症，没办法。
等有时间再琢磨琢磨css，优化下样式。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。