动态表格中点击图片放大

1. 效果
   表格
   
   点击图片
   

2. 代码

   1. 工具类 ：imgBrowse.js

function browseImg(arr) {
    var preview = document.getElementById("preview");
    document.getElementById("preview").innerHTML = "";
    console.log(preview)
    for (var n = 0; n < arr.length; n++) {
        var domImg = document.createElement("img");
        domImg.style.width = '700px'
        domImg.style.height = '700px'
        domImg.src = arr[n];
        preview.appendChild(domImg)
    }
    var clickImgsShow = document.getElementsByClassName("clickImgsShow") //获取点击显示遮罩以及图片dom元素
    var imgContainer = document.getElementById("img-container")
    var close = document.getElementById("mask")
    var imgs = document.getElementById("preview").getElementsByTagName("img")  //获取img元素
    console.log(imgs)
    var last = document.getElementById("last-img")  //获取上一张元素
    var next = document.getElementById("next-img")  //获取下一张元素
    var imgsLen = imgs.length
    var index = 0
    // 初始化显示第一张图片
    imgsShow(index)

    // 点击上一张时
    last.addEventListener('click', function () {
        if (index === 0) {
            index = imgsLen - 1
            imgsShow(index)
        } else {
            index--
            imgsShow(index)
        }
    })
    // 点击下一张时
    next.addEventListener('click', function () {
        if (index === imgsLen - 1) {
            index = 0
            imgsShow(index)
        } else {
            index++
            imgsShow(index)
        }
    })
    // 点击关闭遮罩
    close.addEventListener('click', function () {
        close.style.display = ''
        imgContainer.style.display = ''
    })
}

// 传递当前显示index 隐藏其它图片
function imgsShow(index) {
    var imgs = document.getElementById("preview").getElementsByTagName("img")
    for (var i = 0; i < imgs.length; i++) {
        if (i === index) {
            imgs[i].style.display = ''
        } else {
            imgs[i].style.display = "none";
        }
    }
}

2. 引用

<script src="../../static/lib/extend/imgBrowse.js" type="text/javascript"></script>

3. 容器(放在html的body里面)

<div class="mask" id="mask"></div>
<div class="img-container" id="img-container">
    <div class="preview" id="preview">

    </div>
    <div class="left" id="last-img"><img class="left-imgs" src="../../static/images/last-img.png" alt="left"></div>
    <div class="right" id="next-img"><img class="next-imgs" src="../../static/images/next-img.png" alt="right"></div>
</div>

4. js中使用
   动态表格中

 { field: 'imageUrl', title: 'xxx', align: 'left', templet: function (data) {
                        if (data.imageUrl != null && data.imageUrl != '') {
                            return '<img class="clickImgsShow" src=' + data.imageUrl + '  style="margin: 3px; border: black 2px; width : 27px; height : 27px;" ;/>'
                        }
                        return ''
                    }
                }

  // 初始化控件数据
        $(document).ready(function () {
       
            $('body').on('click', '.clickImgsShow', function () {
                var array = [];
                var index = $('.clickImgsShow').index($(this));
                var src = $('.clickImgsShow')[index].src;
                array.push(src);
                browseImg(array);
                $('#mask').show();
                $('#img-container').show();
            })
        });

最后 来一句歌缓解一下心情 ：人生关死结轻轻送，千般色相偏看重