js放大镜效果

<script language="JavaScript">

var bigX = 300; //预览窗大小,可以任意设置
var bigY = 300;

var smallX = 300; //缩略图宽度
var smallY = 225;

var srcX = 1024; //原图大小,可以任意设置
var srcY = smallY * srcX / smallX;

var viewX = bigX / srcX * smallX; //预览范围
var viewY = bigY / srcY * smallY;
var bl = srcX / smallX;//缩小比例
var border = 1; //边框
window.onload=function (){
smallpic.width=smallX;
smallpic.height=smallY;
bigpic.width=srcX;
bigpic.height=srcY;
view.style.width=viewX;
view.style.height=viewY;
smallbox.style.borderWidth=border;
bigbox.style.borderWidth=border;
if (window.event){
   smallbox.style.width=smallpic.offsetWidth+border*2;
   smallbox.style.height=smallpic.offsetHeight+border*2;
   bigbox.style.width=bigX+border*2;
   bigbox.style.height=bigY+border*2;
}else{
   smallbox.style.width=smallpic.offsetWidth;
   smallbox.style.height=smallpic.offsetHeight;
   bigbox.style.width=bigX;
   bigbox.style.height=bigY;
}
}
function move(e){
var e = window.event?window.event:e;
var iebug = 0;

document.getElementById("bigbox").style.display="";
document.getElementById("view").style.display="";

if (window.event){
   var vX = e.offsetX - viewX/2;
   var vY = e.offsetY - viewY/2;
}else{
   var vX = e.pageX - viewX/2 - smallbox.offsetLeft - border;
   var vY = e.pageY - viewY/2 - smallbox.offsetTop - border;
   iebug = 2;
}
if (vX < 0) vX = 0;
if (vY < 0) vY = 0;
if (vX > smallX - viewX - iebug) vX = smallX - viewX - iebug;
if (vY > smallY - viewY - iebug) vY = smallY - viewY - iebug;
bigpico.style.marginLeft = - vX * bl
bigpico.style.marginTop = - vY * bl
view.style.left = vX + smallbox.offsetLeft + border;
view.style.top = vY + smallbox.offsetTop + border;
}
function out()
{
    document.getElementById("bigbox").style.display="none";
    document.getElementById("view").style.display="none";
}

</script>
<style type="text/css">
*{padding:0;margin:0}
#smallbox{border:0px;float:left;width:0;height:0;}
#bigbox{border:0px #c33 solid;width:0px;height:0px;float:left;overflow:hidden}
#view{border:1px #ddd solid;width:0px;height:0px;position:absolute}
</style><br/><br/><br/>
<div id="smallbox"><img id="smallpic" src="32.jpg" border="0" on

mousemove="move(event)" onmouseout="out()"></div>
<div id="bigbox" style="display:none"><div id="bigpico"><img id="bigpic" src="32.jpg" border="0"></div></div>
<div id="view" onmousemove="move(event)" onmouseout="out()" style="display:none"></div>

 

摘自 http://yumenx.blogbus.com/logs/62122658.html