背景：想在app中加上點選縮圖放大的效果，但是不想匯入大量的JS ，也無需哪些複雜的外掛，於是自己手寫了一個很簡單的實現，在這裡記下來。

程式碼很簡單，還有很多優化空間，時間有限，就沒有優化了

1 . 先準備大圖的位置

大圖是fixed於整個介面，只修改其中的src以達到修改圖片的目的

其中：

<i class="iconfont icon_close_right_c"></i>
//這程式碼是阿里向量圖下載的

完整:

        <!--大圖位置-->
        <div class="imgcontent">
            <div id="_big_img">
                <div class="big_close"><i class="iconfont icon_close_right_c"></i></div>
                <img id="_big_src" src="">
            </div>
        </div>
 

2 . 縮圖程式碼

小圖位置:
<li class="items_content_img" pid="ABCD">
    <div class="img_item_c">
        <img src="檔案縮圖路徑" pid="可擴充套件檔案大圖路徑">
    </div>
    <div class="img_item_c">
        <img src="檔案縮圖路徑" pid="可擴充套件檔案大圖路徑">
    </div>
</li>

此處的pid 路徑我們有用到，這裡可以優化為img 正常顯示縮圖，而pid放完整的大圖路徑，可以優化載入速度

3. 相關JS

               $('#list_add_class').on("click", ".items_content_img img", function () {
                    var _href = $(this).attr("src");
                    $("#_big_src").attr("src", _href).parents(".imgcontent").fadeIn("1000");
                });
                $('.icon_close_right_c').on("click", function () {
                    $(".imgcontent").fadeOut()("1000");
                });
 

程式碼很簡單，點選縮圖則調出隱藏的大圖Div (大圖DIV一開始是隱藏的) 為了優化顯示效果，使用了fadein，fadeout

4.補充CSS程式碼

           .items_content_img{width: 100%;}
            .items_content_img img{
                width: 27vw;
                margin-left: 1.5vw;
                max-height: 14vw;
                border: #ccc 2px solid;
            }
            #_big_img{position: fixed;width: 80%;margin-top: 15%;margin-left: 10vw;}
            #_big_img img{width: 100%;}
            .icon_close_right_c{float: right;color: #ff0000;font-size: 10vw;}
            .imgcontent{height: 200%;opacity: 0.9;background: #fff;display: none}
            .img_item_c{float: left;}

5.總結

這些就是完整流程，程式碼不難，但是實現的效果還是不錯的。

時間有限，就沒有做優化，這種方式可以實現不需要太多JS就簡單的實現看到詳細的大圖