<!DOCTYPE?html>
<html?lang="en">
??<head>
????<meta?charset="UTF-8"?/>
????<meta?name="viewport"?content="width=device-width,?initial-scale=1.0"?/>
????<meta?http-equiv="X-UA-Compatible"?content="ie=edge"?/>
????<title>Document</title>
????<link?rel="stylesheet"?href="index.css"?/>
??</head>
??<body>
????<div?id="box">
??????<div?id="left">
????????<img?src="images/img.png"?id="imgs1"?/>
????????<div?id="mask"></div>
??????</div>
??????<div?id="right">
????????<div?id="border">
??????????<img?src="images/img.png"?id="img2"?/>
????????</div>
??????</div>
????</div>
????<script>
????function?getStyle(el,attr){
??????return?parseFloat(getComputedStyle(el)[attr]);
????}
?????window.onload=()=>{
????????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);?//?相當(dāng)于可視區(qū)的坐標(biāo)
????????????//?鼠標(biāo)相對于元素的坐標(biāo)?=?鼠標(biāo)相當(dāng)于可視區(qū)的坐標(biāo)?-?元素相當(dāng)于可視區(qū)的坐標(biāo)?
????????????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";
????????});
??????}
????</script>
??</body>
</html>
