浏览 5367 次
|
精华帖 (0) :: 良好帖 (0) :: 新手帖 (0) :: 隐藏帖 (0)
|
|
|---|---|
| 作者 | 正文 |
|
发表时间：2009-01-09
最后修改：2009-02-26
<!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>
声明：ITeye文章版权属于作者，受法律保护。没有作者书面许可不得转载。
推荐链接
|
| 返回顶楼 | |
