JavaScript は、シンプルな虫眼鏡の最も完全なコード分析を実装します (ES5)

この記事では、参考までに、シンプルな虫眼鏡を実装するためのJavaScriptの具体的なコードを紹介します。具体的な内容は次のとおりです。

完全なコード:

<!DOCTYPE html>
<html>
<ヘッド>
    <メタ文字セット="UTF-8">
    <title>ES5 拡大鏡</title>
    <スタイル>
        。箱 {
            幅: 170ピクセル;
            高さ: 180ピクセル;
            マージン: 100px 200px;
            境界線: 1px 実線 #ccc;
            位置: 相対的;
        }
        。小さい {
            位置: 相対的;
        }
        。大きい {
            幅: 300ピクセル;
            高さ: 320px;
            位置: 絶対;
            上: 30px;
            左: 220px;
            オーバーフロー: 非表示;
            境界線: 1px 実線 #ccc;
            表示: なし;
        }
        。マスク {
            幅: 100ピクセル;
            高さ: 100px;
            背景: rgba(255,255,0,0.3);
            位置: 絶対;
            上: 0;
            左: 0;
            カーソル: 移動;
            表示: なし;
        }
        .bigimg{
            位置: 絶対;
            左: 0;
            上: 0;
        }
    </スタイル>
</head>
<本文>
    <div class="box" id="box">
        <div class="small">
            <img src="img/shirt_1.jpg" alt="画像"/>
            <div class="mask"></div>
        </div>
        <div class="big">
            <img src="img/shirt_1_big.jpg" alt="画像"/>
        </div>
    </div>
</本文>
<スクリプト>
 var box = document.getElementById('box');
 var small = box.children[0];//小さい画像用のボックス var big = box.children[1];//拡大画像用のボックス var mask = small.children[1];//半透明のマウスがボックスに沿って動きます var bigImage = big.children[0];//大きな画像 small.onmouseover = function(event){
     big.style.display = 'ブロック';
     mask.style.display = 'ブロック';
 }
 small.onmouseout = 関数(){
     big.style.display = 'なし';
     マスクスタイル表示 = 'なし';
 }
 //イベントを移動します。マスクの位置はサンプルに相対的であることに注意してください。
 small.onmousemove = 関数(イベント){
     var event = event || window.event; //イベントオブジェクト // console.log(this.offsetLeft); //0、offsetLeft によって返される距離は、配置された親の左の距離であることに注意してください var x = event.clientX-this.offsetParent.offsetLeft-mask.offsetWidth/2; //ここでは小さい offsetLeft は使用できません。obj offsetLeft を使用してください
     var y = event.clientY-this.offsetParent.offsetTop-mask.offsetHeight/2;
     // 半透明のボックスを境界外に制限する if (x < 0) {
         0 の場合
     }そうでない場合、(x > small.offsetWidth - mask.offsetWidth){
         x = small.offsetWidth - mask.offsetWidth;
     }
     y < 0 の場合{
         y = 0;
     }そうでない場合(y > small.offsetHeight - mask.offsetHeight){
         y = small.offsetHeight - mask.offsetHeight;
     }
     mask.style.left = x + "px";
     マスクスタイルのトップ = y + "px";
     // 大きな画像を拡大します bigImage.style.left = -x*big.offsetWidth/small.offsetWidth + 'px';
     bigImage.style.top = -y*big.offsetHeight/small.offsetHeight + 'px';
     //big.offsetWidth/small.offsetWidth は拡大率です //マウスは小さい画像の場合は下に、大きい画像の場合は上に移動するため、負の数が使用されます}
</スクリプト>
</html>

写真：