結果を示す：
左側のレンダリング領域でマウスを押すと、黄色のオーバーレイと右側の拡大画像が表示されます。カーソルを移動して黄色のオーバーレイの動きに追従し、右側の倍率範囲を変更します。マウスを離した後、黄色のオーバーレイと右側の拡大された領域は非表示になっています。
コンテンツ：
実装の原則：
（テキストの説明はあまりにも鈍く、以下のJS部分の個別のコード分析があります。これは理解しやすいです！）
（テキストの説明はあまりにも鈍く、以下のJS部分の個別のコード分析があります。これは理解しやすいです！）
まず、左側のボックスでマウスの座標を取得する必要があります。横軸を例にとると、x =カーソルからページの左側までの距離、つまりボックスから左側までの距離です。端的に言えば、 e.clientX --leftbox.offsetLeftであり、縦座標は同じです。xとyから得られた値から黄色のマスクレイヤーの幅の半分を引いた値を取得した後、黄色のマスクレイヤーから左側のボックスまでの距離がそれぞれ取得されます。maskX= mask.offsetWidth / 2 、上の垂直距離ボックスは同じで、に割り当てられます。ボックスの絶対変位は左上のマージンです。ここでは、子の絶対親フェーズを使用して、カバーレイヤーの参照システムが左側のボックスであることを確認します。カバーレイヤーが左のボックスを超えて移動するのを防ぐために、ifステートメントを使用してX方向とY方向を決定します。最も難しい部分は、小さいボックスと大きいボックスの移動の比率です。次の式を取得します。移動距離=カバーレイヤーの移動距離*大きな画像の最大移動距離/カバーレイヤーの最大移動距離。これにより、大きな画像の移動距離を取得できますが、料金を支払う必要があります。小さな写真とは逆の移動方向を設定することに注意してください。そのため、前に記号を追加するだけです。
JS市外局番：
<script>
document.addEventListener('DOMContentLoaded',function(){
var smallbox=document.querySelector('.smallbox');
var mask=document.querySelector('.mask');
var bigbox=document.querySelector('.bigbox');
smallbox.addEventListener('mousedown',function(e){
bigbox.style.display='block';
mask.style.display='block';
smallbox.addEventListener('mousemove',fn)
function fn(e){
var X=e.clientX-smallbox.offsetLeft; //光标在盒子内的坐标
var Y=e.clientY-smallbox.offsetTop;
maskX=X-mask.offsetWidth/2; //遮盖层到盒子左和上的距离
maskY=Y-mask.offsetHeight/2;
if(maskX<=0){ //判断是否出界
maskX=0;
}else if(maskX>=smallbox.offsetWidth-mask.offsetWidth){
maskX=smallbox.offsetWidth-mask.offsetWidth;
}
if(maskY<=0){
maskY=0;
}else if(maskY>=smallbox.offsetHeight-mask.offsetHeight){
maskY=smallbox.offsetHeight-mask.offsetHeight;
}
mask.style.left=maskX + 'px'; //判断完是否出界后将距离赋值给遮盖层
mask.style.top=maskY + 'px';
var bigphoto=document.querySelector('.bigphoto'); //获取到右侧的大图片
var bigMapMaxX=bigphoto.offsetWidth-bigbox.offsetWidth; //大图片最大的移动距离
var bigMapMaxY=bigphoto.offsetHeight-bigbox.offsetHeight;
var maskMaxX=smallbox.offsetWidth-mask.offsetWidth; //遮盖层最大的移动距离
var maskMaxY=smallbox.offsetHeight-mask.offsetHeight;
var maxMapX=maskX*bigMapMaxX/maskMaxX; //大盒子移动的距离
var maxMapY=maskY*bigMapMaxY/maskMaxY;
bigphoto.style.left=-maxMapX + 'px';
bigphoto.style.top=-maxMapY + 'px';
}
smallbox.addEventListener('mouseup',function(e){ //鼠标松开后删除mousemove事件
smallbox.removeEventListener('mousemove',fn);
mask.style.display='none';
bigbox.style.display='none';
})
})
})
</script>完全なコード：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.smallbox{
position: relative;
margin-top: 20px;
width: 400px;
height: 400px;
box-sizing: border-box;
cursor: move;
}
.mask{
display: none;
position: absolute;
top: 0px;
left: 0px;
width: 300px;
height: 300px;
background-color: rgba(255, 224, 88, 0.363);
}
.smallphoto{
width: 400px;
height: 400px;
box-sizing: border-box;
border: 1px solid;
}
.bigbox{
position: absolute;
top: 28px;
left: 503px;
width: 500px;
height: 500px;
box-sizing: border-box;
border: 1px solid;
overflow: hidden;
display: none;
}
.bigphoto{
position: absolute;
top: 0px;
left: 0px;
}
.left{
float: left;
width: 80px;
height: 900px;
background-color: rgb(255, 255, 255);
}
.right{
margin-left: 10px;
float:left;
width: 1180px;
height: 900px;
background-color: rgb(255, 255, 255);
}
</style>
</head>
<body>
<script>
document.addEventListener('DOMContentLoaded',function(){
var smallbox=document.querySelector('.smallbox');
var mask=document.querySelector('.mask');
var bigbox=document.querySelector('.bigbox');
smallbox.addEventListener('mousedown',function(e){
bigbox.style.display='block';
mask.style.display='block';
smallbox.addEventListener('mousemove',fn)
function fn(e){
var X=e.clientX-smallbox.offsetLeft;
var Y=e.clientY-smallbox.offsetTop;
maskX=X-mask.offsetWidth/2;
maskY=Y-mask.offsetHeight/2;
if(maskX<=0){
maskX=0;
}else if(maskX>=smallbox.offsetWidth-mask.offsetWidth){
maskX=smallbox.offsetWidth-mask.offsetWidth;
}
if(maskY<=0){
maskY=0;
}else if(maskY>=smallbox.offsetHeight-mask.offsetHeight){
maskY=smallbox.offsetHeight-mask.offsetHeight;
}
mask.style.left=maskX + 'px';
mask.style.top=maskY + 'px';
var bigphoto=document.querySelector('.bigphoto');
var bigMapMaxX=bigphoto.offsetWidth-bigbox.offsetWidth;
var bigMapMaxY=bigphoto.offsetHeight-bigbox.offsetHeight;
var maskMaxX=smallbox.offsetWidth-mask.offsetWidth;
var maskMaxY=smallbox.offsetHeight-mask.offsetHeight;
var maxMapX=maskX*bigMapMaxX/maskMaxX;
var maxMapY=maskY*bigMapMaxY/maskMaxY;
bigphoto.style.left=-maxMapX + 'px';
bigphoto.style.top=-maxMapY + 'px';
}
smallbox.addEventListener('mouseup',function(e){
smallbox.removeEventListener('mousemove',fn);
mask.style.display='none';
bigbox.style.display='none';
})
})
})
</script>
<div class="left"></div>
<div class="right">
<div class="smallbox">
<div class="mask"></div>
<img src="./iphone.jpg" alt="" class="smallphoto">
</div>
<div class="bigbox">
<img src="./iphone.jpg" alt="" class="bigphoto">
</div>
</div>
</body>
</html>