一个简单的放大镜

<script>

var box=document.getElementById("box");

var sm=box.children[0];

var lg=box.children[1];

var mask=sm.children[1];

sm.onmouseover=function(){
mask.style.display = 'block';
lg.style.display = "block";

}

sm.onmouseleave=function(){
mask.style.display = 'none';
lg.style.display = "none";

}

sm.onmousemove=function(event){
var event=event||window.event;
var pagex=event.pageX||event.clientX+scroll().left;
var pagey=event.pageY||event.clientY+scroll().top; 
var x=pagex-sm.parentNode.offsetLeft-mask.offsetWidth/2;
var y=pagey-sm.parentNode.offsetTop-mask.offsetHeight/2;
if (x<0) {
x=0;
}else if (x>sm.offsetWidth-mask.offsetWidth) {
x=sm.offsetWidth-mask.offsetWidth;
}
if (y<0) {
y=0;
}else if (y>sm.offsetHeight-mask.offsetHeight) {
y=sm.offsetHeight-mask.offsetHeight;
}

mask.style.left=x+'px';
mask.style.top=y+"px";
var lgImg=lg.children[0];
var lgx=(lgImg.offsetWidth-lg.offsetWidth)/(sm.offsetWidth-mask.offsetWidth);
console.log(lgx);
lgImg.style.marginLeft = -x*lgx+"px";
lgImg.style.marginTop = -y*lgx+"px";

}
function scroll(){
if (window.pageYOffset!=null) {
return {
left:window.pageXOffset,
top:window.pageYOffset
}
}else if (document.compatMode==="CSS1Compat") {
return {
left:document.documentElement.scrollLeft,
top:document.documentElement.scrollTop
}
}return {
left:document.body.scrollLeft,
top:document.body.scrollTop
}

}

</script>