JavaScript图片放大镜效果
原文 http://www.aspxhome.com/javascript/program/200910/1068519.htm
<!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=iso-8859-1" />
<title>图片放大镜效果</title>
<style>
#zoomdiv {
position: absolute;
background: #ffffff;
border:1px solid #CCCCCC;
display:none;
text-align: center;
overflow: hidden;
}
#zoomup{
position:absolute;
background:#c0c0c0;
display:none;
filter:alpha(opacity=50);
opacity:.5;
cursor:move;
}
.zoom{
position:relative;
}
</style>
</head>
<body>
<div style="position:absolute;border:1px solid #c0c0c0;left:400px;"><img src="/article/UploadPic/200910/19/shoe2_small-14.jpg" class="zoom" big="/article/UploadPic/200910/19/shoe2_big-80.jpg" /></div>
</body>
</html>
<script>
var zoom = function(o){
var d = document,db=document.body,timgs=d.getElementsByTagName('img'),ie = !+'\v1',isStrict = d.compatMode == "CSS1Compat",
opt = {
width:200,
height:200,
offset:20,
float:'rigth',
minWidth:100
},
div = d.createElement('div'),divup = d.createElement('div'),
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){
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));
}else{
var dv = d.defaultView;
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;
},
extend = function(t,s){
for(var p in s){
t[p] = s[p];
};
};
div.id='zoomdiv',divup.id = 'zoomup';
div.innerHTML = '<img id="bigimg" src="" />';
db.appendChild(div);
extend(opt,o);
function leave(){
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.height,top=getXY(this).t,left = getXY(this).l,tWidth,tLeft,sWidth;
bimg.onload = function(){
div.style.display = 'block';
bwidth = bimg.width,bheight = bimg.height,
sx = bwidth/width,sy = bheight/height;
tLeft = opt.float=='rigth'?opt.offset+width+left:left-opt.offset-width*opt.width*sx,
sWidth = window.innerWidth||(isStrict?d.documentElement.clientWidth:db.clientWidth);
if(tLeft+opt.width+5>sWidth){
tWidth = sWidth - 5 - tLeft;
tWidth<opt.minWidth&&(tLeft = left-opt.offset-opt.width,tWidth=0);
};
extend(div.style,{
left:tLeft +'px',
top:top+'px',
width:(tWidth||opt.width)+'px',
height:opt.height+'px'
});
extend(divup.style,{
width:(tWidth||opt.width)/sx+'px',
height:opt.height/sy+'px',
display:'block'
})
}
bimg.src = this.getAttribute('big');
};
ci.parentNode[ie?'onmouseleave':'onmouseout'] = ie?leave:function(e){
!(this===e.relatedTarget||(this.contains?this.contains(e.relatedTarget):this.compareDocumentPosition(e.relatedTarget)==20))&&leave();
}
}
};
}
zoom({width:300,height:300});
</script>
