/**************************************************
* 用法:
width,height是放大显示的区域
**************************************************/
//定义所有的变量,方法
var zoom = function(o){
var d = document,
db=document.body,
timgs=d.getelementsbytagname('img'),
opt = {
width:200,
height:200,
offset:20,
float:'right',
minwidth:100
},
div = d.createelement('div'),
divup = d.createelement('div'),
//获取元素的定位,x,y
getxy = function(el){
var r={t:0,l:0},
ua = navigator.useragent.tolowercase(),
add = function(t,l){r.l+=l,r.t+=t},
p = el;
if(el&&el!=db){
//el.getboundingclientrect,获得元素的左,上,右和下分别相对浏览器视窗的位置
if(el.getboundingclientrect){
var b = el.getboundingclientrect();
add(b.top + math.max(d.body.scrolltop,d.documentelement.scrolltop),
b.left+math.max(d.body.scrollleft,d.documentelement.scrollleft));
add(-d.documentelement.clienttop,-d.documentelement.clientleft);
}else{
while(p){
add(p.offsettop,p.offsetleft);
p = p.offsetparent;
}
p = el.parentnode;
while (p && p != db) {
add(-p.scrolltop,-p.scrollleft);
p = p.parentnode;
}
}
}
return r;
},
//重新设置div的宽高
extend = function(t,s){
for(var p in s){
t[p] = s[p];
};
};
div.id='zoomdiv',divup.id = 'zoomup';
div.innerhtml = '';
db.appendchild(div);
extend(opt,o);
function leave(obj,e){
var e=e||event;
/*alert(obj);
alert(e.currenttarget);*/
//火狐,opera专用,e.currenttarget是火狐,opera专用的属性
if (e.currenttarget) {
//relatedtarget对于 mouseout 事件来说,该属性是离开目标时,鼠标指针进入的节点。
//e.relatedtarget != obj,当移入子元素的时候,会出现相等
if (e.relatedtarget != obj) {
if (obj != e.relatedtarget.parentnode) {
div.style.display = divup.style.display = 'none';
db.onmousemove = null;
}
}
} else {//ie专用
if (e.toelement != obj) {
if (obj != e.toelement.parentnode) {
div.style.display = divup.style.display = 'none';
db.onmousemove = null;
}
}
}
};
for(var i=0,ci;ci=timgs[i++];){
if(ci.classname=='zoom'){
ci.onmouseover = function(e){
this.parentnode.appendchild(divup);
var bimg=d.getelementbyid('bigimg'),bwidth,bheight,sx,sy,
width = this.offsetwidth,
height = this.offsetheight,
top=getxy(this).t,
left = getxy(this).l,
twidth,tleft,swidth;
//当鼠标移过的时候,开始载入大图
bimg.src = this.getattribute('big');
if(!bimg.complete){
bimg.onload=showbimg;
}else{
showbimg();
}
function showbimg(){
div.style.display = 'block';
bwidth = bimg.width,
bheight = bimg.height,
sx = bwidth/width,sy = bheight/height;
tleft =opt.float=='right'?opt.offset+width+left:left-opt.offset-opt.width,
swidth = window.innerwidth||(d.documentelement.clientwidth);
//如果浏览器宽度不够,则自动适应显示div的宽度
if(tleft+opt.width+5>swidth){
twidth = swidth - 5 - tleft;
//此句式比较特殊
twidthheight+top ? height - divup.offsetheight : scrolly;
scrollx = x - divup.offsetwidth/2 < left ? 0 : x + divup.offsetwidth/2>width+left ? width - divup.offsetwidth : scrollx;
div.scrolltop = scrolly*sy;
div.scrollleft = scrollx*sx;
extend(divup.style,{top:scrolly+'px',left:scrollx+'px'});
}
};
};
ci.parentnode.onmouseout =function(event){leave(this,event)};
}
};
}