layui图片点击放大

最新推荐文章于 2024-12-23 09:29:45 发布

前端路上迷茫的小鲨鱼

最新推荐文章于 2024-12-23 09:29:45 发布

阅读量881

点赞数

CC 4.0 BY-SA版权

分类专栏： layui

本文链接：https://blog.youkuaiyun.com/Guoyu1_/article/details/107331372

layui 专栏收录该内容

34 篇文章

订阅专栏

function showMedia(id, type, src) {
    var idBar = "#" + id;
    var width = $(idBar).width();
    var height = $(idBar).height();
    var scaleWH = width / height;
    var bigH = 500;
    var bigW = scaleWH * bigH;
    if (bigW > 900) {
        bigW = 900;
        bigH = bigW / scaleWH;
    } // 放大预览图片
    layer.open({
        type: 1,
        title: false,
        closeBtn: 1,
        shadeClose: true,
        area: [bigW + 'px', bigH + 'px'], //宽高
        content: "<img width='" + bigW + "' height='" + bigH + "'controls=\"controls\" src=" + src + " />"
    });
}
$('#idCardFront').bind('click', function () {
    var idBar = $("#idCardFront")
    var result = idBar[0].src;
    showMedia("idCardFront", "image", result);
});
$('#idCardReverse').bind('click', function () {
    var idBar = $("#idCardReverse")
    var result = idBar[0].src;
    showMedia("idCardReverse", "image", result);
});

$('#demo2 img').each(function(){
    var _this = $(this);
    _this.on('click',function(e){
        var idBar = _this
        var src = idBar[0].src;
        var width = $(idBar).width();
        var height = $(idBar).height();
        var scaleWH = width / height;
        var bigH = 500;
        var bigW = scaleWH * bigH;
        if (bigW > 900) {
            bigW = 900;
            bigH = bigW / scaleWH;
        } // 放大预览图片
        layer.open({
            type: 1,
            title: false,
            closeBtn: 1,
            shadeClose: true,
            area: [bigW + 'px', bigH + 'px'], //宽高
            content: "<img width='" + bigW + "' height='" + bigH + "'controls=\"controls\" src=" + src + " />"
        });
    })
})