js實現點擊查看大圖功能

使用layui的彈窗實現點擊查看大圖功能

function getImage(url, callback){
    let img = new Image();
    img.src = url;
    if(img.complete){
        callback(img.width, img.height);
    }else{
        img.onload = function(){
            callback(img.width, img.height);
        }
    }
}

function showBigImage(url) {
    getImage(url, function(w, h){
        let widht = $(window).width() * 0.9;
        let height = $(window).height() * 0.9;
        if (w > h) {
            widht = widht > w ? w : widht;
            height = widht * h/w;
        } else {
            height = height > h ? h : height;
            widht = height * w/h;
        }
        layer.open({
            type: 1,
            title: false,
            closeBtn: 0,
            shadeClose: true,
            area: [widht + 'px', height + 'px'],
            content: '<img src="' + url + '" οnclick="window.open(this.src)" style="max-width: ' + widht + 'px;max-height: ' + height + 'px;cursor:pointer;"/>'
        });
    });
}

// 使用
$(document).on('click', "table img,form img", function () {
    showBigImage($(this).attr("src"));
});