纯Javascript实现图片点击弹出_html/css_WEB-ITnose

<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<img s.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 alt="纯Javascript实现图片点击弹出_html/css_WEB-ITnose" >