javascript特效-div放大展示图片

最新推荐文章于 2024-03-06 10:12:18 发布

page1969

最新推荐文章于 2024-03-06 10:12:18 发布

阅读量209

点赞数

文章标签： JavaScript XHTML prototype Microsoft HTML ViewUI

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
<html xmlns="http://www.w3.org/1999/xhtml">  
<head>  
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
<title>div放大展示图片</title>  
<script type="text/javascript">  
    var Erit;      
    window["undefined"]=window["undefined"];      
          
    if (!Erit) {      
        Erit = {};      
    } else if (typeof Erit != "object") {      
        throw new Error("This namespace has been registered.");      
    } else if (Erit.newClass) {      
        throw new Error("The newClass has been created.");      
    }   
       
    Erit.ZoomImg = function (){};   
       
    Erit.addEvent = function(obj, evt, fn){      
        if(obj.addEventListener) {      
            obj.addEventListener(evt, fn, false);      
        }      
        else if(obj.attachEvent) {      
            obj.attachEvent('on'+evt, fn);      
        }      
    };   
       
    Erit.ZoomImg.prototype = {   
        isIE:(navigator.appName == "Microsoft Internet Explorer") ? true : false,      
        dom:null,      
        el:null,   
        hx:0,   
        hy:0,   
        init : function (img,dw){   
            var _body = document.body;   
            var _idiv = document.createElement("div");   
            var _mark = document.createElement("div");   
               
            var _o = this;   
            var _h = this.getViewHeight();   
            var _w = this.getViewWidth();   
            this.hx = _h;   
            this.hy = _w;   
               
            _idiv.id = "img_div";   
            _idiv.style.cssText = "display:none;position:absolute;border:#9FF 1px solid; width:1px; height:1px; z-index:20000;left:" +  _w   
                                    + "px;top:" + _h + "px;";   
               
            _mark.style.cssText = "display:none;z-index:999;position:absolute;top:0;left:0;-moz-opacity:0.5;opacity:.50;filter:alpha(opacity=50);background-color:#CCC;zoom:1;";   
            _mark.id = "mask";   
            _body.appendChild(_idiv);   
            _body.appendChild(_mark);   
               
            var _v = this.getDom("img_div");   
               
            var _img_pro = this.getChildImg(img);   
            var _imgl = _img_pro.length;   
            for (var _i = 0; _i < _imgl;_i++){   
                _img_pro[_i].onclick = function (){   
                    var _src = this.src;   
                    var _srcArray = _src.split("/");   
                    _src = _srcArray[_srcArray.length - 1];   
                    _o.getDom("mask").style.display = "";   
                       
                    _o.getDom("mask").style.cssText = "z-index:999;position:absolute;top:0;left:0;-moz-opacity:0.5;opacity:.50;filter:alpha(opacity=50);background-color:#CCC;zoom:1;width:" + _w*2 + "px;height:"+ _h*2 +"px;";   
                    _o.divCartoonist(_v,_w,_h,_src,dw);   
                };   
            }   
        },   
        getViewWidth:function (){   
            var _w = (window.innerWidth) ? window.innerWidth : (document.documentElement && document.documentElement.clientWidth) ? document.documentElement.clientWidth : document.body.offsetWidth;   
            return _w / 2;   
        },   
        getViewHeight:function (){   
            var _h = (window.innerHeight) ? window.innerHeight : (document.documentElement && document.documentElement.clientHeight) ? document.documentElement.clientHeight : document.body.offsetHeight;   
            return _h / 2;   
        },   
        getChildImg : function(v){   
            return document.getElementsByName(v);   
               
        },   
        getDom : function (v) {   
            return document.getElementById(v);   
        },   
        divCartoonist : function (v,x,y,s,dw){   
            var _w = 1;   
            var _h = 1;   
            var _step = 20;   
            var _hx = this.hx;   

            var _hy = this.hy;   
            var _o = this;   
               
            (function(){   
                if (_w <= dw) {   
                    v.style.cssText = "position:absolute;background-color:#FFF;border:#9FF 1px solid; width:" + _w + "px; height:" + _h + "px; z-index:20000;left:" + x   
                                    + "px;top:" + y + "px;";   
                    setTimeout(arguments.callee, _step);   
                } else {   
                    var _img = document.createElement("img");   
                    _img.src = "images/" + s;   
                    _img.style.cssText = "width:" + parseInt(dw,10) + "px;height:" + parseInt(dw,10) + "px;";   
                       
                    v.appendChild(_img);   
                       
                       
                    Erit.addEvent(_img,"click",function (){   
                        v.style.cssText = "display:none;position:absolute;border:#9FF 1px solid; width:0px; height:0px; z-index:20000;left:" +  _hy   
                                    + "px;top:" + _hx + "px;";   
                        _o.getDom("mask").style.display = "none";   
                        while(v.childNodes[0]) {   
                            v.removeChild(v.childNodes[0]);   
                        }   
                    });   
                }   
                   
                _w += 4;   
                _h += 4;   
                x -= 2;   
                y -= 2;   
            })();   
        }   
    };   
    Erit.addEvent(window,"load",function (){      
        new Erit.ZoomImg().init("pro_img",300);      
    });   
       
</script>  
</head>  
  
<body>  
    <img name="pro_img" src="images/1.gif" width="78" height="58" />  
</body>  
</html>

page1969

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
javascript特效-div放大展示图片

&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt; &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt; &lt;head&gt; &
复制链接

扫一扫