js で虫眼鏡効果を実現するためのアイデアとコード

<div id="ボックス">
        <!-- toBig は虫眼鏡要素です -->
     <div id="toBig"></div>
        <!-- 小さい画像 -->
  <img src="img/05.jpg" id="smallImg" width="800px">
</div>
<div id="beBig">
        <!-- 大きな画像、比率は 1.5 倍 -->
  <img src="img/05.jpg" id="bigImg" width="1200px">
</div>

 *{
          マージン: 0px;
          パディング: 0px;
            }    
            ＃箱{
             位置: 相対的;
             フロート: 左;
            }
   #toBig{
    幅: 80ピクセル;
    高さ: 80px;
    境界線: 1px の灰色
    背景色: 透明;
    位置: 絶対;
   }
   #大きくなろう{
    フロート: 左;
    オーバーフロー: 非表示;
    境界線: 1px の灰色
    位置: 相対的;
    左: 40px;
    上:325ピクセル;
   }
   #bigImg{
    位置: 絶対;
   }

<script type="text/javascript">
            // 小さい画像、大きい画像、虫眼鏡要素、大きい画像の親要素を取得します。var smallImg = document.querySelector("#smallImg");
   var bigImg = document.querySelector("#bigImg");
   var toBig=document.querySelector("#toBig");
   var beBig=document.querySelector("#beBig");
 
            /*ページが読み込まれたときに小さい画像と大きい画像の比率を計算します*/
            var q = 0;
   window.onload = 関数(){
    q=bigImg.offsetWidth/smallImg.offsetWidth;
                // 虫眼鏡の幅、高さ、比率に基づいて、表示される拡大コンテンツのサイズを計算します。beBig.style.width = toBig.clientWidth * q + "px";
    beBig.style.height = toBig.clientHeight * q + "px";
   }
            // 虫眼鏡要素の中心を取得し、マウスが虫眼鏡の中心にあることを確認します var xCenter=toBig.clientWidth/2;
   var yCenter=toBig.clientHeight/2;
 
            // フラグは記号です。マウスが押されると true になり、移動できます。flag=false;
   toBig.onmousedown = 関数(){
    フラグ=true;
   }
   toBig.onmouseup = 関数(){
    フラグ=false;
   }
   
   window.onmousemove=関数(ev){
    var ev = ev || window.event;
                //フラグがtrueの場合、虫眼鏡要素は押されてドラッグできます if (flag) {
                    //マウスの現在の位置を取得し、要素自体に加えて移動する位置を計算します var mouseX=ev.clientX,mouseY=ev.clientY;
     var trueX = mouseX-xCenter;
 
                    //虫眼鏡要素が小さい画像の範囲を超えているかどうかを判断します。if (trueX < smallImg.offsetLeft) {
      trueX = smallImg.offsetLeft;
     }
     trueX > smallImg.clientWidth - toBig.offsetWidth の場合{
      trueX = smallImg.clientWidth - toBig.offsetWidth;
     }
     var trueY=mouseY - yCenter;
     trueY <= smallImg.offsetTopの場合{
      trueY = 小さい画像の上端オフセット;
     }
     trueY が smallImg.clientHeight - toBig.offsetHeight の場合 {
      trueY = smallImg.clientHeight - toBig.offsetHeight;
     }
 
                    // 小さい画像が移動するBig.style.left = trueX + "px";
     toBig.style.top = trueY + "px";
     コンソールにログ出力します。
     
     // 大きな画像を移動する位置 bigImg.style.left =-(trueX * q) + "px";
     bigImg.style.top = -(trueY * q) + "px";
    }
   }
   
</スクリプト>