function getStyle(el,attr){
return parseFloat(getComputedStyle(el)[attr]);
}
window.οnlοad=()=>{
let mask = document.querySelector("#mask");
let img1 = document.querySelector("#imgs1");
let img2 = document.querySelector("#img2");
let border = document.querySelector("#border");
let left = document.querySelector("#left");
let right = document.querySelector("#right");
// 放大比例
let scale = 2;
mask.style.width = getStyle(border,"width")/scale + "px";
mask.style.height = getStyle(border,"height")/scale + "px";
img2.style.width = getStyle(img1,"width")*scale + "px";
img2.style.height = getStyle(img1,"height")*scale + "px";
right.style.display = "none";
left.addEventListener("mouseenter",()=>{
mask.style.display = "block";
right.style.display = "block";
});
left.addEventListener("mouseleave",()=>{
mask.style.display = "none";
right.style.display = "none";
});
left.addEventListener("mousemove",(e)=>{
let {x,y} = left.getBoundingClientRect();
// console.log(e.clientX,e.clientY); // 相当于可视区的坐标
// 鼠标相对于元素的坐标 = 鼠标相当于可视区的坐标 - 元素相当于可视区的坐标
x = e.clientX - x - mask.offsetWidth/2;
y = e.clientY - y - mask.offsetHeight/2;
// 范围限制
//x = x < 0?0:x;
x = Math.max(0,x); // 最小是 0
// x = x > left.clientWidth - mask.offsetWidth?left.clientWidth - mask.offsetWidth:x;
x = Math.min(left.clientWidth - mask.offsetWidth,x);
y = Math.max(0,y); // 最小是 0
y = Math.min(left.clientHeight - mask.offsetHeight,y);
mask.style.left = x + "px";
mask.style.top = y + "px";
img2.style.left = -x*scale + "px";
img2.style.top = -y*scale + "px";
});
}