放大镜

var box = my$(‘box‘);
var smallBox = box.children[0];
var bigBox = box.children[1];

var smallImage = smallBox.children[0];
var mask = smallBox.children[1];
var bigImage = bigBox.children[0];
box.onmouseenter = function(){
mask.style.display = "block";
bigBox.style.display = "block";
}
box.onmouseleave = function(){
mask.style.display = "none";
bigBox.style.display = "none";
}
box.onmousemove = function(e){
e = e || event;
var maskX = (e.clientX - box.offsetLeft) - (mask.offsetWidth / 2);
var maskY = (e.clientY - box.offsetTop) - (mask.offsetHeight / 2);
var maxMaskX = box.offsetWidth - mask.offsetWidth;
var maxMaskY = box.offsetHeight - mask.offsetHeight;
maskX = maskX < 0 ? 0 : maskX;
maskY = maskY < 0 ? 0 : maskY;
maskX = maskX > maxMaskX ? maxMaskX : maskX;
maskY = maskY > maxMaskY ? maxMaskY : maskY;
mask.style.left = maskX + "px";
mask.style.top = maskY + "px";
var i = parseInt(bigBox.offsetWidth / mask.offsetWidth);
var j = parseInt(bigBox.offsetHeight / mask.offsetHeight);
bigImage.style.left = -(maskX * i) + "px";
bigImage.style.top = -(maskY * j) + "px";
}

放大镜

原文：https://www.cnblogs.com/pxxdbk/p/12654989.html