js を使ってシンプルな虫眼鏡効果を実現

。箱 {
 幅: 450ピクセル;
 高さ: 450px;
 マージン: 100px 0 0 100px;
 境界線: 1px 実線の赤;
 位置: 相対的;
 }

 /* 右側の大きなボックス */
 .bigBox{
 幅: 540ピクセル;
 高さ: 540px;
 位置: 絶対;
 上: 100px;
 左: 560ピクセル;
 境界線: 1px 実線 #ccc;
 オーバーフロー: 非表示;
 表示: なし;
 }
 .bigBox画像{
 位置: 絶対;
 左: 0;
 上: 0;
 }


 /* かぶせる */
 .ボックス .マスク{
 幅: 260ピクセル;
 高さ: 260px;
 背景色: 黄色;
 /*透明度を調整*/
 不透明度: .4;
 位置: 絶対;
 左: 0;
 上: 0;
 /*デフォルトで消える*/
 表示: なし;
 }

<スクリプト>
 
 window.onload = 関数 (){
 var box = document.querySelector(".box");
 var マスク = document.querySelector(".mask");
 var bigBox = document.querySelector(".bigBox");
 var bigImg = document.querySelector(".bigBox > img");
 コンソールにログ出力します。
 
 //マウスがボックス内に移動します。onmouseover = function (){
 document.querySelector(".mask").style.display = "ブロック";
 document.querySelector(".bigBox").style.display = "ブロック";
 }
 // ボックスから外へ移動します。onmouseout = function (){
 document.querySelector(".mask").style.display = "なし";
 document.querySelector(".bigBox").style.display = "なし";
 }

 // オーバーレイをマウスの動きに追従させる box.onmousemove = function (){
 // ボックスには 100 ピクセルの余白があるため、それを減算する必要があります。そうしないと、位置がずれてしまいます。var left = event.pageX - 100 - 130;
 var top = event.pageY - 100 - 130;
 // カバーするオブジェクトはボックスの範囲を超えることはできないため、座標値の範囲を決定する必要があります。 // カバーするオブジェクトがボックス内で移動できる最大距離を取得します。 var maskMax = this.offsetWidth - mask.offsetWidth;
 //裁判官は左
 if(左 <= 0){
 左 = 0;
 }そうでない場合(左 >= マスク最大){
 左 = マスク最大;
 }

 // トップ
 上端 <= 0 の場合
 上 = 0;
 }そうでない場合(top >= maskMax){
 上 = マスクMax;
 }

 // スタイルに左と上の値を設定します。mask.style.left = left + "px";
 mask.style.top = top + "px";
 mask.style.cursor = "移動";

// 大きなボックス内の大きな画像の最大移動距離 var bigImgMax = bigImg.offsetWidth - bigBox.offsetWidth;
// 大きな画像の左の値 var bigImgX = mask.offsetLeft * bigImgMax / maskMax;
// 大きな画像の上の値 var bigImgY = mask.offsetTop * bigImgMax / maskMax;
 // オーバーレイの移動方向は大きな画像の移動方向と逆なので、ここでは負の値を指定する必要があります。bigImg.style.left = -bigImgX + "px";
 bigImg.style.top = -bigImgY + "px";

 }
 }

<div class="box">
 <img src="../img/small.jpg" alt="">
<div class="mask">
</div>
<div class="bigBox">
 <img src="../img/big.jpg" alt="">
</div>