製品の拡大鏡効果を実現する JavaScript

この記事では、参考までに、製品拡大鏡を実装するためのJavaScriptの具体的なコードを紹介します。具体的な内容は次のとおりです。

HTML+CSS部分:

<スタイル>
        。小さい{
            位置: 相対的;
            幅: 400ピクセル;
            高さ: 450px;
            境界線: 1px 実線 #ccc;
        }
        .small画像{
            幅: 100%;
            高さ: 100%;
        }
        .small .mask{
            位置: 絶対;
            左: 0;
            上: 0;
            幅: 300ピクセル;
            高さ: 300px;
            背景色: rgba(0, 255, 0, .2);
        }
        。大きい{
            位置: 絶対;
            左: 450ピクセル;
            上: 8px;
            幅: 550ピクセル;
            高さ: 550px;
            境界線: 1px 実線 #ccc;
            オーバーフロー: 非表示;
            表示: なし;
        }
        .bigimg{
            位置: 絶対;
            左: 0;
            上: 0;
        }
    </スタイル>
 
<本文>
    <div class="small">
        <img src="./img/small.jpg">
        <div class="mask"></div>
    </div>
    <div class="big">
        <img src="./img/big.jpg">
    </div>
</本文>

JS部分:

<スクリプト>
        var small = document.querySelector('.small');
        var マスク = document.querySelector('.mask');
        var big = document.querySelector('.big');
        var bigImg=document.querySelector('.big>img');
        // 大きな画像の幅と高さを取得します。var bigWidth=bigImg.offsetWidth;
        var bigHeight=bigImg.offsetHeight;
 
        // 
        関数move(e){
            var x = e.pageX - this.offsetLeft;
            var y = e.pageY - this.offsetTop;
            コンソールログ(x,y);
            // マスクの位置を移動します var maskHeight = mask.offsetHeight/2;
            var maskWidth = mask.offsetWidth/2;
            mask.style.left = x - maskWidth+'px';
            mask.style.top = y - maskHeight + 'px';
 
        // マスクの移動範囲を制限する // console.log('mask.offsetTop',mask.offsetTop);
            // console.log('mask.offsetLeft',mask.offsetLeft);
            var maxLeft=small.offsetWidth - mask.offsetWidth;
            if(mask.offsetTop<0){
                マスクスタイルトップ=0;
            }
            if(mask.offsetLeft > small.offsetWidth - mask.offsetWidth){
                mask.style.left =maxLeft+'px';
            }
            if(mask.offsetLeft<0){
                マスクスタイル左 = 0;
            }
            if(mask.offsetTop > small.offsetHeight - mask.offsetHeight){
                mask.style.top = small.offsetHeight - mask.offsetHeight + 'px';
            }
 
        // bigImg 大きな画像 大きなボックス 大きな画像の移動 // (bigImg.offsetWidth - big.offsetWidth) / (samll.offsetWidtth - mask.offsetWidth)
        // 大きな画像の最大移動距離 = - マスクの移動距離 * 大きな画像の最大距離 / マスクの最大移動距離 bigImg.style.left = -mask.offsetLeft*(bigImg.offsetWidth - big.offsetWidth) / (small.offsetWidth - mask.offsetWidth)+"px";
            bigImg.style.top = -mask.offsetTop*(bigImg.offsetHeight - big.offsetHeight) / (small.offsetHeight - mask.offsetHeight)+"px";
        }
       
        // 小さい画像上のマスクを移動しますsmall.addEventListener('mousemove',move);
        small.addEventListener('mouseover',function(){
            big.style.display='ブロック';
            mask.style.display='ブロック';
        })
        small.addEventListener('mouseout',function(){
            big.style.display='なし';
            マスクスタイル表示='なし';
        })
</スクリプト>

効果のデモンストレーション: