画像拡大鏡効果のJSバージョン

画像拡大鏡効果のJSバージョン

この記事では、画像拡大鏡効果を実現するためのJSの具体的なコードを参考までに紹介します。具体的な内容は次のとおりです。

<!DOCTYPE html>
<html>
<head lang="ja">
    <メタ文字セット="UTF-8">
    <タイトル></タイトル>
    <スタイル>
        *{
            パディング:0;
            マージン:0;
        }
        。箱{
            位置: 相対的;
            幅:350ピクセル;
            高さ:510px;
            マージン:自動;
        }
        。真ん中 {
            位置: 相対的;
            境界線: 1px ピンク
            オーバーフロー: 非表示;

        }
        .hover_ceng{
            位置: 絶対;
            zインデックス: 1;
            背景: url(./img/bg.png);
            背景サイズ: 4px 4px;
            表示: なし;

        }
        .middle >画像{
            幅:100%;
            高さ:100%;
        }

        。小さい{
            位置: 相対的;
            幅:350ピクセル;
            高さ:110ピクセル;
            テキスト配置: 中央;
        }
        .small>span{
            位置: 絶対;
            表示:ブロック;
            上:15px;
            行の高さ: 50px;
            フォントサイズ: 20px;
            幅:20px;
            高さ:50px;
            背景: #eabcb8;
        }
        .small .leftbtn {
            左: 0;
        }
        .small .rightbtn {
            右: 0;
        }
        .small>.list>ul>li{
            リストスタイル:なし;
            フロート:左;
            幅:250px;
        }
        。リスト{
            幅:250px;
            表示:インラインブロック;
            テキスト配置: 左;
            オーバーフロー: 非表示;
        }
        .list_ul{
            幅:500ピクセル;
            オーバーフロー: 非表示;
            高さ:自動;
            遷移: すべて 0.5 秒線形;
        }
        .small-li{
            表示: インラインブロック;
            幅:54px;
            高さ:58px;
            マージン:10px 0;
            border:2px 実線 透明;
        }
        .small-li>画像{
            幅:100%;
            高さ:100%;
        }

        。大きい{
            位置: 絶対;
            トップ:0;
            左:350px;
            高さ:400px;
            幅:350ピクセル;
            border:1px 実線 ゲインズボロ;
            背景画像: url(./img/big8.jpg);
            /*背景サイズ: 350px 400px;*/
            表示: なし;
            /*背景繰り返し: 繰り返しなし;*/
        }

    </スタイル>
</head>
<本文>
 <div class="box">
     <div class="middle" style="width:350px;height:400px;">
         <div class="hover_ceng" style=" 幅:153.508px;高さ:200px;"></div>
         <img id="middleimg" src="./img/middle.5.jpg" alt=""/>
     </div>
     <div class="small">
         <span class="leftbtn"><</span>
         <div class="list">
           <ul class="list_ul">
            <li>
                 <div class="small-li" data-middle="middle.5.jpg" data-big="big5.jpg">
                     <img src="./img/small5.jpg" alt=""/>
                 </div>
                 <div class="small-li" data-middle="middle.6.jpg" data-big="big6.jpg">
                     <img src="./img/small6.jpg" alt=""/>
                 </div>
                 <div class="small-li" data-middle="middle.7.jpg" data-big="big7.jpg">
                     <img src="./img/small7.jpg" alt=""/>
                 </div>
                 <div class="small-li" data-middle="middle.8.jpg" data-big="big8.jpg">
                     <img src="./img/small8.jpg" alt=""/>
                 </div>
            </li>
            <li>
               <div class="small-li" data-middle="middle.1.jpg" data-big="big1.jpg">
                   <img src="./img/small1.jpg" alt=""/>
               </div>
               <div class="small-li" data-middle="middle.2.jpg" data-big="big2.jpg">
                   <img src="./img/small2.jpg" alt=""/>
               </div>
               <div class="small-li" data-middle="middle.3.jpg" data-big="big3.jpg">
                   <img src="./img/small3.jpg" alt=""/>
               </div>
               <div class="small-li" data-middle="middle.4.jpg" data-big="big4.jpg">
                   <img src="./img/small4.jpg" alt=""/>
               </div>
            </li>
           </ul>
         </div>
         <span class="rightbtn">> </span>
     </div>
     <div class="big">
         <!--<img src="./img/big6.jpg" alt=""/>-->
     </div>
 </div>
 <スクリプト>
     var smallblack=document.getElementsByClassName("small-li");
     var 中間画像 = document.getElementById("中間画像");
     var middleblock=document.getElementsByClassName("middle")[0];
     var ceng = document.getElementsByClassName("hover_ceng")[0];
     var box_b = document.getElementsByClassName("box")[0];
     var bigbang=document.getElementsByClassName("big")[0];
     var leftbutton = document.getElementsByClassName("leftbtn")[0];
     var 右ボタン = document.getElementsByClassName("rightbtn")[0];
     var listmeun=document.getElementsByClassName("list_ul")[0];
      var before = null;
     (var i =0;i<smallblack.length;i++){
         smallblack[i].onmouseenter=関数(){
             if(befortu)befortu.style.borderColor="透明";
             this.style.borderColor="ピンク";
             前に =これ;
             //中央の画像が表示されます middleimage.src="./img/" + this.getAttribute("data-middle");
             //全体像を取得します bigbang.style.backgroundImage="url(./img/"+this.getAttribute('data-big')+")";
         }
     }
  //マウス入力イベント変数を追加

     middleblock.onmouseenter=関数(){
      this.style.cursor = "移動";
      ceng.style.display = "ブロック";
      bigbang.style.display = "ブロック";
     }
     middleblock.onmouseleave=関数(){
         ceng.style.display="なし";
         bigbang.style.display = "なし";
     }
     middleblock.onmousemove = function(m) {
         var pageX = m.pageX || m.clientX;
         var pageY = m.pageY || m.clientY;
         //現在の要素のオフセットを取得します offsetLeft 左オフセット offsetTop 上オフセット this.offsetHeight, this.offsetWidth
       pageX = pageX -(box_b.offsetLeft+parseInt (ceng.style.width)/2);
       pageY = pageY -(box_b.offsetTop+parseInt (ceng.style.height)/2);
         var bigleft = parseInt (this.style.width) - parseInt (ceng.style.width);
         var bigtop = parseInt (this.style.height) - parseInt (ceng.style.height);
         pageX = pageX <=0 ? 0:(pageX >=bigleft ? bigleft :pageX );
         pageY = pageY <=0 ? 0:(pageY >=bigtop ? bigtop :pageY );
         ceng.style.left= pageX + "px";
         ceng.style.top= ページY + "px";
         //マウスを動かすと、大きな画像もそれに応じて動きます bigbang.style.backgroundPosition = (-pageX * 2.28) + "px " + (-pageY * 2) + "px ";

     }
     左ボタン.onclick = 関数(){
         listmeun.style.marginLeft =0+"px";
     }
    右ボタンのonclick = 関数(){
         listmeun.style.marginLeft =-250+"px";
     }
 </スクリプト>
</本文>
</html>

最大の画像は元のウェブサイトからダウンロードできなかったため、拡大すると効果が気になる可能性があり、画像を拡大縮小する方法を学ぶ必要があります。

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

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

<<:  MySQLのカバーインデックスに関する知識ポイントのまとめ

>>:  2 つの Linux サーバー間の自動ファイル同期

推薦する

MySQL無料インストール版のパスワード設定に関する詳細なチュートリアル

方法1: SET PASSWORDコマンドを使用する MySQL -u ルート mysql> ...

CSS3ダイヤモンドパズルはdivのみを回転し、背景画像は回転しない機能を実現します

需要背景プロジェクトはVueを使用して作成され、ビジネス要件にはパズル効果があります。デフォルトの背...

データバインディングとリストデータの表示にはVue3を使用する

目次1. Vue2との比較1. Vue3の新機能2. Vue2とVue3の応答原理の比較3. 配列の...

FTP、FTPS、SFTPの違いについて簡単に説明します

目次FTP、FTPS、SFTP の概要FTP FTPS FTPサーバーFTPソフトウェアのアクティブ...

MySQL 文字セットの概要

目次文字セット比較ルール4つのレベルの文字セットと比較規則3つのシステム変数このノートは主にMySQ...

MySQLカーソルの詳細な紹介

目次1. カーソルとは何ですか? 2. カーソルの使い方1. カーソルを宣言する2.カーソルを開く3...

Vue3の一般的なAPIの使用方法の紹介

目次ライフサイクルの変化反応的な参照vue2.x では ref を使用して要素タグを取得します。vu...

MySql のグループ化と各グループからランダムに 1 つのデータを取得する

アイデア: 最初にランダムに並べ替えてからグループ化します。 1. テーブルを作成します。 テーブル...

Vue3 のリアクティブ関数 toRef 関数 ref 関数の紹介

目次リアクティブ機能使用法: toRef 関数 (理解するだけ)使用法: ref関数レスポンシブデー...

Docker Swarm を使用して分散クローラー クラスターを構築する例

クローラーの開発プロセス中に、クローラーを複数のサーバーに展開する必要がある状況に遭遇したことがある...

MySQL で高性能なインデックスを作成するための完全な手順

目次1. インデックスの基本1. インデックスの種類1.1 Bツリーインデックス1.2 ハッシュイン...

HTML における Div と table の違い (あらゆる側面から詳細に説明)

1: 速度と読み込み方法の違いdivとtableの違いは速度ではなく、読み込み方法です。速度はネット...

ネットワークセグメント内の IP アドレスに対する Nginx の接続制限設定の詳細な説明

Nginx におけるいわゆる接続制限は、実際には TCP 接続、つまり 3 ウェイ ハンドシェイク後...

MySQL 正規表現 (regexp と rlike) の検索機能の例分析

この記事では、例を使用して MySQL 正規表現 (regexp および rlike) の検索機能を...

MySQL 5.6 圧縮パッケージのインストール方法

MySQL には、msi インストールと zip 解凍の 2 つのインストール方法があります。 zi...