場景：列表頁展示圖片，縮圖。點選圖片，在當前頁面，用1個視窗，展示對應的大圖或者原圖。

之前採用jquery外掛imgbox，有問題，廢棄。

又下載了一個zoomify，放大的，不符合要求。點選檢視“大圖”，只是放大的功能，而不是展示原圖的url。

原圖的url和縮圖的url是不同的。

後來實在是懶得研究這玩意了，就1個對話方塊，手動展示1個頁面，頁面的內容是1個圖片。圖片在當前上下文知道，也不需要Iframe等麻煩的原始。

專案正好使用了layui，用它的對話方塊就行了。

網上正好也搜到了1個對應的實現，核心程式碼：

     var img = "<img src='" + $("#jiaoguitu").attr("src") + "' />";
    //捕獲頁
    layer.open({
        type: 1,
        shade: false,
        title: false, //不顯示標題
        //area:['600px','500px'],
        area: [img.width + 'px', img.height+'px'],
        content: img, //捕獲的元素，注意：最好該指定的元素要存放在body最外層，否則可能被其它的相對元素所影響
        cancel: function () {
            //layer.msg('捕獲就是從頁面已經存在的元素上，包裹layer的結構', { time: 5000, icon: 6 });
        }
    });
 

var img = new Image();
    img.src = $("#jiaoguitu").attr("src");  
     var imgHtml = "<img src='" + $("#jiaoguitu").attr("src") + "' />";
    //捕獲頁
    layer.open({
        type: 1,
        shade: false,
        title: false, //不顯示標題
        //area:['600px','500px'],
        area: [img.width + 'px', img.height+'px'],
        content: imgHtml, //捕獲的元素，注意：最好該指定的元素要存放在body最外層，否則可能被其它的相對元素所影響
        cancel: function () {
            //layer.msg('捕獲就是從頁面已經存在的元素上，包裹layer的結構', { time: 5000, icon: 6 });
        }
    });
 

參考文章

https://blog.csdn.net/sxf359/article/details/72771529

參考作者的程式碼，自己的寫法如下：

html頁面，用了vue，大概如此：

     <img v-bind:src="formatImageUrl(item.url)" class="zoom" :bigSrc="absUrl(item.url)">

img元素的src是縮圖圖片，

https:///2018/11/jtn21162644744195.jpg?x-oss-process=image/resize,w_250

bigSrc自定義屬性存放原圖的url。

https:///2018/11/jtn21162644744195.jpg

js程式碼：

vue獲得圖片列表正好，給img.zoom迴圈繫結點選事件。

點選的時候，找到bigSrc，用1個對話方塊展開。

這裡沒有按照原作者的思路，用img的寬度和高度作為對話方塊的寬度和高度，而是用 固定寬度和高度。

放大的程式碼，很簡潔，也符合需要。

axios.post(
                    config.photoListData,
                    urlParams(params)
            ).then(function(res){
                that.page=res.data.page;
                  renderLayuiPage(photoApp,that.page);
                   that.$nextTick(
                           function(){ 
                                //渲染之後，再繫結
                                 $("img.zoom").each(function(){
                                     $(this).bind("click",function(){
                                         var img = "<img src='" + $(this).attr("bigSrc") + "' />";
                                         //頁面層
                                         layer.open({
                                           type: 1,
                                           skin: 'layui-layer-rim', //加上邊框
                                           area: ['1200px', '540px'], //寬高
                                           content: img
                                         });
                                     });
                                 });
                          });
            });
--------------------- 
作者：小雷FansUnion 
來源：CSDN 
原文：https://blog.csdn.net/FansUnion/article/details/86352810 
版權宣告：本文為博主原創文章，轉載請附上博文連結！