jsはショッピングサイトの虫眼鏡機能を実現します

<div class="box">
        <div class="small">
            <img src="small3.jpg" alt="">
            <div class="move"></div>
        </div>
        <div class="big">
            <img src="big3.jpg" alt="">
        </div>
</div>

。小さい{
    位置: 相対的;
    フロート: 左;
    幅: 450ピクセル;
    高さ: 450px;
    境界線:1px実線 #000;
}
.small .move{
    位置: 絶対;
    トップ:0;
    幅: 300ピクセル;
    高さ: 300px;
    背景色: rgba(0,0,0,0.4);
    カーソル:移動;
    表示: なし;
}
。大きい{
    位置: 相対的;
    フロート: 左;
    幅: 540ピクセル;
    高さ: 540px;
    左マージン: 20px;
    オーバーフロー: 非表示;
    境界線:1px実線 #000;
    表示: なし;
}
.bigimg{
    位置: 絶対;
    トップ:0;
    左: 0;
}

var box=document.getElementsByClassName('box')[0],small=box.getElementsByClassName('small')[0],move=small.getElementsByClassName('move')[0],smallImg=small.getElementsByTagName('img')[0],big=box.getElementsByClassName('big')[0],bigImg=big.getElementsByTagName('img')[0];
    //まず、必要な要素をすべて取得します。small.onmouseover=function(){
        move.style.display='ブロック';
        big.style.display="ブロック";
    };
    small.onmouseout=関数(){
        移動スタイルの表示='なし';
        big.style.display="なし";
    };
    small.onmousemove=関数(e){
        e=e||window.event; //互換性に関する考慮事項 var x=e.clientX-smallImg.getBoundingClientRect().left-move.offsetWidth/2;
        var y=e.clientY-smallImg.getBoundingClientRect().top-move.offsetHeight/2;
        x<0の場合{
            0 の場合
        }
        if(x>smallImg.offsetWidth-move.offsetWidth){
            x = smallImg.offsetWidth-move.offsetWidth;
        }
        y<0の場合{
            y=0;
        }
        if(y>smallImg.offsetHeight-move.offsetHeight){
            y = smallImg.offsetHeight - move.offsetHeight;
        }
        move.style.left=x+"px";
        移動スタイルトップ=y+"px";
        //マウスの動きに合わせて左に移動するブロックを実装するコード var scale = bigImg.offsetWidth/smallImg.offsetWidth;
        //比率に応じて拡大します bigImg.style.left='-'+x*scale+'px';
        // 画像を左と上に移動する必要があるため、マイナス記号を追加する必要があります bigImg.style.top='-'+y*scale+'px';
    }