jsを使用してシンプルな虫眼鏡効果を実現します

この記事では、簡単な虫眼鏡効果を実現するためのjsの具体的なコードを参考までに共有します。具体的な内容は次のとおりです。

効果

効果: 元画像内でマウスを動かすと、黄色のボックスがマウスに追従し、黄色のボックスで覆われた部分が表示領域に表示されます。

効果図は以下のとおりです。

核となるアイデア

1. マウスを画像の上に置くと表示領域が現れ、マウスを小さなボックスから離すと表示領域が消えます。

2. マウスが画像上で動くと、小さなボックスもマウスと一緒に動き、マウスは黄色の小さなボックスの中央にあります。

3. 小さなボックスは画像領域を超えないように判断されます

4. 表示領域は、画像上の小さなボックスが移動するのと同じ距離だけ移動する必要があります。

5. 表示領域のサイズが変更されたり、表示領域の内容が増減したりすると、元の画像上の黄色のボックスもそれに応じて変化します。

操作する

1.まず必要な要素を入手する

 // ページ上で必要な要素を取得します var box1 = document.querySelector ('.box1')
        var 黄色 = document.querySelector('.yellow')
        var box2 = document.querySelector('#rightbox')
        var スクリーン = rightbox.children[0]

2. マウスを画像に近づけると表示領域が現れ、離れると消えます。

// マウスが画像内に入ったり出たりする box1.onmouseenter=function(){
            box2.style.display='ブロック'
        }
        box1.onmouseleave=関数(){
            box2.style.display='なし'
        }

これは、マウスのエンターイベントとリーブイベントを使用して実行できます。それぞれ表示するように設定し、表示しないように設定するだけです。

3. マウスを動かすと、小さなボックスも一緒に動き、マウスは黄色の小さなボックスの中央にあります。

box1.onmousemove=関数(e){
          // 画像内にある小さなボックスの中心点を計算します var x = e.pageX-box1.offsetLeft-yellow.offsetWidth/2
           var y = e.pageY - box1.offsetTop - yellow.offsetHeight / 2
         // マウスに合わせて動くように黄色のボックスに値を割り当てます yellow.style.left=x+'px'
           黄色.スタイル.top=y+'px'
        }

1. イベントを使用して、マウスが画像上にあるたびにトリガーし、いつでも更新できるようにします。

2.図の小さなボックスの中心点を計算します

計算式: (ページ上のマウスの位置から、画像のオフセット距離を引いた値から、その半分を引いた値を使用します)

ここで半分を引くと、マウスが常に黄色のボックスの中央に留まるようになります。

4. 小さなボックスは判定条件を示しており、黄色の小さなボックスは画像領域を超えないようにする

//マウスを画像の上に移動してイベントをトリガーします box1.onmousemove=function(e){
            // 画像内の小さなボックスの中心点を計算します var x = e.pageX-box1.offsetLeft-yellow.offsetWidth/2
           var y = e.pageY - box1.offsetTop - yellow.offsetHeight / 2
 
   // --------------------------------------------------------------------------------
 // 新しい部分 // 小さなボックスがimg範囲を超えているかどうかを判定し、黄色の小さなボックスがimg範囲を超えないようにします if (x < 0) {
            // このとき、0は画像の左側ではありませんが、小箱が左端にあるとき、小箱の中心点x=0
           }そうでない場合、x>box1.offsetWidth-yellow.offsetWidth){
            // 小さなボックスの X 軸の中心点が、画像ボックスの幅からその幅を引いた値より大きい場合、制限を超えていることを意味します。これは常に、画像ボックスの幅からその幅を引いた値に等しくなります。x=box1.offsetWidth-yellow.offsetWidth
           }
 
        // 上記と同じ if(y<0){
               y=0
           }そうでない場合、y>box1.offsetHeight-yellow.offsetHeight){
            y=box1.offsetHeight-yellow.offsetHeight
           }
 
   // ---------------------------------------------------------------------------------
        // マウスに合わせて動くように黄色のボックスに値を割り当てます yellow.style.left=x+'px'
           黄色.スタイル.top=y+'px'

1. 小さなボックスの左側が画像を超えているかどうかを判断します。if (x<0) で指定された 0 は、中心点に基づいて計算されます。

2. 右側を決定するx>box1.offsetWidth-yellow.offsetWidth

（画像領域の幅から小ボックスの幅を引いた値より大きいか）

なぜ小箱の幅なのか？小箱の中心点で決まり、0の位置が小箱の中心点です。小箱の半分が減算されているので、右側に減算されているのは小箱の半分です*2

3. 上部と下部も同様です。今度は黄色のボックスが画像領域を超えません。

5. 表示領域は、画像上の小さなボックスが移動するのと同じ距離だけ移動します。

//計算により、画像内の小さなボックスの移動量と表示領域の移動量の比率を取得できます srceen.style.left=-x/box1.offsetWidth*srceen.offsetWidth+'px'
 srceen.style.top=-y/box1.offsetHeight*srceen.offsetHeight+'px'

表示領域がどれだけ移動するかは、小さなボックスがどれだけ移動するかによって決まります。

小さなボックスの移動量を画像の幅で割り、表示領域の幅を掛けた値

表示領域の移動値は、画像内の小さなボックスの移動率と同じになります。

6. 表示領域のサイズが変わったり、表示領域の内容が変わったりすると、画像上の黄色のボックスもそれに応じて変化します。

 // 画像上の黄色のボックスのサイズを計算します yellow.style.width=box1.offsetWidth/(srceen.offsetWidth/box2.offsetWidth)+'px'
           yellow.style.height=box1.offsetHeight/(srceen.offsetHeight/box2.offsetHeight)+'px'
        }

計算方法は、黄色のボックスの幅 = 画像の幅 / (表示領域のコンテンツ幅 / 表示領域の枠の幅)です。

高さは同じです

マウスの動きによってトリガーされるため、リアルタイムで更新されます

調整

.img2{
            幅: 3000ピクセル;
            高さ: 3000ピクセル;
            位置: 絶対;
        }
        #右ボックス{
            位置: 絶対;
            上: 0;
            左: 650ピクセル;
            幅: 900ピクセル;
            高さ: 900ピクセル;
            オーバーフロー: 非表示;
            表示: なし;
        }

ボックスのサイズを調整したり、比率を拡大したりする必要がある場合は、これら 2 つのスタイルの幅と高さを変更するだけです。

コンテンツ、CSS、JS 全体のコード

<!DOCTYPE html>
<html lang="ja">
<ヘッド>
    <メタ文字セット="UTF-8">
    <meta http-equiv="X-UA-compatible" content="IE=edge">
    <meta name="viewport" content="width=デバイス幅、初期スケール=1.0">
    <title>ドキュメント</title>
    <スタイル>
        *{
            パディング: 0;
            マージン: 0;
        }
        .img1{
            幅: 300ピクセル;
            高さ: 300px;
        }
        .img2{
            幅: 3000ピクセル;
            高さ: 3000ピクセル;
            位置: 絶対;
        }
        #右ボックス{
            位置: 絶対;
            上: 0;
            左: 650ピクセル;
            幅: 900ピクセル;
            高さ: 900ピクセル;
            オーバーフロー: 非表示;
            表示: なし;
        }
        。黄色{
            背景色: 黄色;
            不透明度: 0.5;
            幅: 100ピクセル;
            高さ: 100px;
            位置: 絶対;
            上: 0;
            左: 0;
        }
        .box1{
            幅: 300ピクセル;
            高さ: 300px;
            位置: 相対的;
            左マージン: 300px;
        }
    </スタイル>
</head>
<本文>
    <div class="box1">
        <img src="./images/1.jpg" alt="" class="img1">
        <div class="黄色"></div>
    </div>
    <div id="右ボックス">
        <img src="./images/1.jpg" alt="" class="img2">
    </div>
    <スクリプト>
        // ページ上で必要な要素を取得します var box1 = document.querySelector ('.box1')
        var yellow = document.querySelector('.yellow')
        var box2 = document.querySelector('#rightbox')
        var ソース = rightbox.children[0]
        // マウスが画像内に入ったり出たりする box1.onmouseenter=function(){
            box2.style.display='ブロック'
        }
        box1.onmouseleave=関数(){
            box2.style.display='なし'
        }
        //マウスを画像の上に移動してイベントをトリガーします box1.onmousemove=function(e){
            // 画像内の小さなボックスの中心点を計算します var x = e.pageX-box1.offsetLeft-yellow.offsetWidth/2
           var y = e.pageY - box1.offsetTop - yellow.offsetHeight / 2
 
 
        // 小さなボックスがimg範囲を超えていないかチェックし、黄色のボックスがimg範囲を超えないようにします。if (x < 0) {
            // このとき、0は画像の左側ではありませんが、小箱が左端にあるとき、小箱の中心点x=0
           }そうでない場合、x>box1.offsetWidth-yellow.offsetWidth){
            // 小さなボックスの X 軸の中心点が、画像ボックスの幅からその幅を引いた値より大きい場合、制限を超えていることを意味します。これは常に、画像ボックスの幅からその幅を引いた値に等しくなります。x=box1.offsetWidth-yellow.offsetWidth
           }
 
        // 上記と同じ if(y<0){
               y=0
           }そうでない場合、y>box1.offsetHeight-yellow.offsetHeight){
            y=box1.offsetHeight-yellow.offsetHeight
           }
 
 
        // マウスに合わせて動くように黄色のボックスに値を割り当てます yellow.style.left=x+'px'
           黄色.スタイル.top=y+'px'
 
 
        //計算により、画像内の小さなボックスの移動量と表示領域の移動量の比率を取得できます srceen.style.left=-x/box1.offsetWidth*srceen.offsetWidth+'px'
           srceen.style.top=-y/box1.offsetHeight*srceen.offsetHeight+'px'
 
        // 画像上の黄色のボックスのサイズを計算します yellow.style.width=box1.offsetWidth/(srceen.offsetWidth/box2.offsetWidth)+'px'
           yellow.style.height=box1.offsetHeight/(srceen.offsetHeight/box2.offsetHeight)+'px'
        }
        
    </スクリプト>
</本文>
</html>

以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。

以下もご興味があるかもしれません: