layui.layer 预览图片自适应大小

EN
EN
2022-05-20 / 0 评论 / 1,244 阅读 / 正在检测是否收录...

引入layer,给图片增加一个点击事件就OK了

l3e5ddfo.png


var src = $(this).attr("src");
lookPicture(src,1);

/**
 * layer 图片预览自适应
 * @param resourcesUrl
 * @param resourcesType 传 1 就OK了
 */
function lookPicture(resourcesUrl,resourcesType) {
    // resourcesUrl:接受的图片地址,resourcesType之前定义的数据类型(可省略)
    if (resourcesUrl == "") {
        layer.msg("没有发现图片!");
        return;
    }
    var img = new Image();
    img.onload = function () {//避免图片还未加载完成无法获取到图片的大小。
        //避免图片太大,导致弹出展示超出了网页显示访问,所以图片大于浏览器时下窗口可视区域时,进行等比例缩小。
        var max_height = $(window).height() - 100;
        var max_width = $(window).width();

        //rate1,rate2,rate3 三个比例中取最小的。
        var rate1 = max_height / img.height;
        var rate2 = max_width / img.width;
        var rate3 = 1;
        var rate = Math.min(rate1, rate2, rate3);
        //等比例缩放
        var imgHeight = img.height * rate; //获取图片高度
        var imgWidth = img.width * rate; //获取图片宽度

        var imgHtml = "<img src='" + resourcesUrl + "' width='" + imgWidth + "px' height='" + imgHeight + "px'/>";
        //弹出层
        if (resourcesType ==1 ) {
            layer.open({
                type:1,//可传入的值有:0(信息框,默认)1(页面层)2(iframe层)3(加载层)4(tips层)
                shade: 0.6,
              //  maxmin: true,
                anim: 2,
                title: false,
               // title: '图片预览',//  title: false,
                area: ['auto', 'auto'],
                // skin: 'layui-layer-nobg', //没有背景色
                shadeClose: true,
                content: imgHtml
            });
        }
    }
    img.src = resourcesUrl;
}
2

评论 (0)

取消