layui图片点击放大

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 + " />"
        });
    })
})

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值