放大镜
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";
}
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步