画像拡大鏡効果の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>

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