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

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 を応援していただければ幸いです。

以下もご興味があるかもしれません:
  • 画像拡大鏡効果のJSバージョン
  • jsはショッピングサイトの虫眼鏡機能を実現します
  • js を使ってシンプルな虫眼鏡効果を実現
  • js 虫眼鏡拡大画像効果
  • 虫眼鏡の効果を実現するために js を使用する簡単な例
  • JavaScript 画像拡大鏡効果コード [コードは比較的シンプルです]
  • 魔法のJavascript画像拡大鏡
  • JavaScript 画像拡大鏡(ドラッグ アンド ドロップ、ズーム効果)
  • ネイティブ js で記述された虫眼鏡効果
  • シンプルな虫眼鏡効果を実現するJavaScript

<<:  MySQL累積計算実装方法の詳しい説明

>>:  Alibaba Cloud イメージリポジトリの Docker 構成変更の実装

推薦する

Dockerコンテナとホストマシン間の8時間の差の問題を解決する

デプロイに docker-compose を使用すると、出力ログと関連イベントが検証されて出力される...

Linux でのデータベースのスケジュールバックアップの実装スクリプト

目次シナリオ: サーバーデータベースを毎日定期的にバックアップする必要がある1. まずバックアップス...

MySQL ストアドプロシージャとストアドファンクションの詳細な説明

1 ストアドプロシージャ1.1 ストアドプロシージャとは何かストアド プロシージャは、特定の機能を実...

ウェブページ作成のヒントのまとめ

序文この記事は主に、日常の Web ページ制作で遭遇する問題解決スキルの一部をまとめ、皆さんの参考と...

MySQL 8.0.25 解凍版のインストールと設定方法のグラフィックチュートリアル

MySQL 8.0.25解凍版のインストールチュートリアル、参考までに具体的な内容は以下のとおりです...

Vue がコンポーネント通信を実装する 8 つの例

目次1. Props 親コンポーネント ---> 子コンポーネント通信2. $emit 子コン...

Vue+tsx のスロット使用の問題が置き換えられない

目次序文問題を見つける解決する追記序文最近、 UIコンポーネントを作成する予定で、 vue 2.xと...

ソケット '/tmp/mysql.sock' 経由でローカル MySQL に接続できない解決策

エラーメッセージ:エラー 2002: ソケット '/tmp/mysql.sock' ...

HTML サブタグと sup タグ

今日はあまり使わないHTMLタグ「subタグ」と「supタグ」を紹介します。定義と使用法: <...

HTML ユーザー登録ページ設定ソースコード

上記の Web ページをデザインします。 <!DOCTYPE html> <htm...

Virtualbox に Centos7 仮想マシンをインストールする詳細なグラフィック チュートリアル

1. Centos7をダウンロードするダウンロードアドレス: https://mirrors.tun...

MySQL の削除に基づく構文エイリアスの問題

目次MySQL 削除構文エイリアスの問題mysql の delete ステートメントでエイリアスを使...

TypeScriptのインデックスシグネチャの理解に関する簡単な説明

目次1. インデックス署名とは何ですか? 2. インデックス署名構文3. インデックス署名に関する注...

CSS を使用してマウスをホバーすることで他のタグのスタイルを変更するサンプルコード

序文:私の知る限り、現在 CSS で制御できるのは、タグをホバーしたときにそのタグの下の兄弟タグとサ...

Windows10でのMySQL 5.7.21のインストールと設定のチュートリアル

この記事では、MySQL 5.7.21 のインストールと設定方法を記録し、皆様と共有します。 1. ...