支持各种浏览器的小巧的放大镜_爱你21克_百度空间企业库|免费b2b网站

支持各种浏览器的小巧的放大镜_爱你21克_百度空间

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">
<html xmlns="">
<head>
<title>中国站长天空-网页{tx}-图片{tx}-支持各种浏览器的小巧的放大镜</title>
<meta http-equiv="content-type" content="text/html;charset=gb2312">

<style type="text/css">
.zoomdiv{
position: absolute;
background: #ffffff;
border:1px solid #CCCCCC;
display:none;
text-align: center;
overflow: hidden;
display:none;
}
.zoomup{
background:#c0c0c0;
display:none;
filter:alpha(opacity=50);
opacity:.5;
cursor:move;
position:absolute;
top:0;
left:0;
}
</style>
</head>
<body>

<div style="position:absolute;border:1px solid #c0c0c0;left:50px;">
<img src="" id="small">
</div>
<div style="position:absolute;border:1px solid #c0c0c0;left:600px;">
<img src="" id="small1">
</div>
<script language="javascript">
function zoom(o){
var d = document,db = document.body,dd = d.documentElement,ie = !+'\v1',div,divup,img = d.getElementById(o.id),
   imgTL=getTL(img),top=imgTL.t,left = imgTL.l,sx,sy,opt = {width:200,height:200,offset:20};
//创建元素
function creElm(o,pN,t){
   var tmp = d.createElement(t||'div');
   for(var p in o){
    tmp[p] = o[p];
   }
   return pN?pN.appendChild(tmp):db.appendChild(tmp);
};
//得带元素偏移量
function getTL(el){
   var b = el.getBoundingClientRect();
   //html4.01解析用db
   return {
    'l': b.left + dd.scrollLeft - dd.clientLeft,
    't': b.top + dd.scrollTop - dd.clientTop
   }
};
function extend(t,s){
   for(var p in s){
    t[p] = s[p];
   };
};
//离开时清掉
function leave(){
   div.style.display = divup.style.display = 'none';
   ie?db.detachEvent('onmousemove',move):db.removeEventListener('mousemove',move,false)
};
function move(e){
   var e = e || event,x=e.pageX||e.clientX+dd.scrollLeft,y=e.pageY||e.clientY+dd.scrollTop,
    scrolly = y - divup.offsetHeight/2 - top,scrollx = x - divup.offsetWidth/2 - left;
   scrolly = y - divup.offsetHeight/2 < top ? 0 : y + divup.offsetHeight/2>img.height+top ? img.height - divup.offsetHeight : scrolly;
   scrollx = x - divup.offsetWidth/2 < left ? 0 : x + divup.offsetWidth/2>img.width+left ? img.width - divup.offsetWidth : scrollx;
   div.scrollTop = scrolly*sy;div.scrollLeft = scrollx*sx;
   extend(divup.style,{top:scrolly+'px',left:scrollx+'px'});
}
if(img){
   extend(opt,o);
   //创建大图的容器
   div = creElm({className:'zoomdiv'});
   //创建在小图上的浮层
   divup = creElm({className:'zoomup'},img.parentNode);
   creElm({onload:function(){
    //ie下隐藏时width/height看不到问题
    div.style.display = 'block';
    var bwidth = this.width,bheight = this.height;
    div.style.display = 'none';
    //大图和小图的比例
    sx = bwidth/img.width,sy = bheight/img.height;
    extend(div.style,{
     left:(!opt.float?opt.offset+img.width+left:left-opt.offset-opt.width) +'px',
     top:top+'px',
     width:opt.width+'px',
     height:opt.height+'px'
    });
    extend(divup.style,{
     width:opt.width/sx+'px',
     height:opt.height/sy+'px'
    })
   },src:opt.bigUrl},div,'img');
   img.onmouseover = function(e){
    div.style.display = divup.style.display = 'block';
    ie?db.attachEvent('onmousemove',move):db.addEventListener('mousemove',move,false);
   };
   img.parentNode[ie?'onmouseleave':'onmouseout'] = ie?leave:function(e){
    !(this===e.relatedTarget||(this.contains?this.contains(e.relatedTarget):this.compareDocumentPosition(e.relatedTarget)==20))&&leave();
   }
}
}
/*
width 大图的宽可选默认200
height 大图的高可选默认200
bigUrl 大图的url 必须的
id 小图的大小必须的
float 左边还是右边显示可选默认的是右边 'right' or 'left'
offset 大图距离小图的偏移量可选默认20
*/
zoom({
id:'small',
bigUrl:'http://www.zzsky.cn/effect/images/201004212010/shoe2_big.jpg',
offset:50
});
zoom({
id:'small1',
bigUrl:'http://www.zzsky.cn/effect/images/201004212010/big.jpg',
float:'left',
width:300,
height:300
});
</script>
</body>
</html>

郑重声明：资讯【支持各种浏览器的小巧的放大镜_爱你21克_百度空间】由发布，版权归原作者及其所在单位，其原创性以及文中陈述文字和内容未经(企业库qiyeku.com)证实，请读者仅作参考，并请自行核实相关内容。若本文有侵犯到您的版权，请你提供相关证明及申请并与我们联系（qiyeku # qq.com）或【在线投诉】，我们审核后将会尽快处理。

—— 相关资讯 ——