画像拡大鏡効果の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 サーバー間の自動ファイル同期

推薦する

さまざまなSQL結合を簡単に学ぶ

SQL JOIN 句は、テーブル間の共通フィールドに基づいて 2 つ以上のテーブルの行を結合するため...

W3C チュートリアル (2): W3C プログラム

W3C 標準化プロセスは 7 つの異なるステップに分かれています。 W3C 標準化プロセスは 7 つ...

vue-router のハッシュモードと履歴モードの違い

vue-routerには2つのモードがありますハッシュモード履歴モード1. シングルページアプリケー...

MySQL/MariaDB で完全な Unicode をサポートする方法

目次utf8mb4 の紹介UTF8 バイト数超過エラーutf8mb4 サポートデフォルトの文字エンコ...

Vue.js フロントエンド Web ページ ポップアップ非同期動作例の分析

目次1. 序文2. ポップアップコンポーネントを2つ見つける3. 自分で作る3.1. Promise...

MySQLカスタム関数の簡単な使用例

この記事では、例を使用して MySQL カスタム関数の使用方法を説明します。ご参考までに、詳細は以下...

VPS はオフライン ダウンロード サーバーを構築します (ネットワーク ディスクの時代以降)

モチベーション学習の必要性から、海外のサーバーメーカー(どこのメーカーかは言いません)のVPSサービ...

Nginx10m+の高並列カーネル最適化に関する簡単な説明

高い同時実行性とは何ですか?デフォルトの Linux カーネル パラメータは、最も一般的なシナリオ向...

Videojs+swiper が Taobao の商品詳細カルーセルを実現

この記事では、Taobao商品詳細のカルーセルを実現するためのvideojs+swiperの具体的な...

JavaScript 履歴オブジェクトの説明

目次1. ルートナビゲーション2. 履歴状態管理API (1)ハッシュチェンジイベント(2)ポップス...

Nginx と Lua を使用した JWT 検証の概要

目次序文Lua スクリプトnignx.conf の設定Dockerfileの設定序文データベースやそ...

Dockerイメージをプルしてバージョンを確認する方法

イメージのバージョンとタグを確認するには、docker hubで確認する必要があります。アドレスは次...

MySQLデータベースでコマンドを自動補完する3つの方法

注意: 3 番目の方法は XSell でのみ使用され、finalsell では使用できません。方法1...

...

MySQL の冗長インデックスと重複インデックスの詳細な説明

MySQL では、同じ列に複数のインデックスを作成できます。意図的であるかどうかにかかわらず、MyS...