JS點擊img圖片放大再次點擊縮小JS實現 簡單實用Ctrl+C+V就可以用

業務需要，從后台獲取的圖片列表，用img標簽展示，用戶需要查看大圖。記錄下來以便學習和參考.示例圖如下：

放大之前：

放大之后：

點擊后放大（由於圖片高度超出了頁面，需要通過overflow:auto;設置滾動條，點擊放大圖片回到列表界面）

附代碼（js實現）：

1、獲取所有img標簽，添加展開功能，該方法在圖片列表加載完成以后執行：

            function addExpand() {
                var imgs = document.getElementsByTagName("img");
                imgs[0].focus();
                for(var i = 0;i<imgs.length;i++){
                    imgs[i].onclick = expandPhoto;
                    imgs[i].onkeydown = expandPhoto;
                }
            }

2、方法1種循環給圖片的onclick和onckeydown指定了expandPhoto方法，該方法實現了點擊圖片放大的功能：

            function expandPhoto(){
                var overlay = document.createElement("div");
                overlay.setAttribute("id","overlay");
                overlay.setAttribute("class","overlay");
                document.body.appendChild(overlay);
 
                var img = document.createElement("img");
                img.setAttribute("id","expand")
                img.setAttribute("class","overlayimg");
                img.src = this.getAttribute("src");
                document.getElementById("overlay").appendChild(img);
 
                img.onclick = restore;
            }

3、（style樣式）方法2中，expndPhoto創建了一個id="overlay"，class="overlay"的div，再給div創建了一個id="expand"，class="overlayimg"的img標簽，overlay和overlayimg類選擇器定義如下：

 <style>
          .overlay{
               background-color:#000; //背景色
               opacity: 1.0; //不透明度
               filter:alpha(opacity=100); //透明度
               position: fixed;
               top:0;
               left:0;
               width:100%;
               height:100%;
               z-index: 10;
               overflow:auto; //滾動條
           }
           .overlayimg{
               position: absolute;
               z-index: 11;
               width:99%; //寬度
               height:auto; //高度自動
           }
</style>

4、方法2中，給創建的img標簽的onclick指定了restore方法，該方法實現了點擊大圖回到圖片列表的功能，定義如下：

            function restore(){
                document.body.removeChild(document.getElementById("overlay"));
                document.body.removeChild(document.getElementById("expand"));
            }

5、復制粘貼即可

 

原文鏈接：https://blog.csdn.net/weixin_33890526/article/details/94694759