javascript特效-div放大展示图片

qishi001 · 发表于 2013-2-7 19:24:56

<!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>

		自动登录	找回密码
密码			立即注册