【前端】 Layui点击图片实现放大、关闭效果

实现效果:点击图片实现放大,点击空白处关闭效果。下图。

实现逻辑:二维码是使用JQ插件生成的,点击二维码,获取图片路径,通过Layui的弹窗显示放大后的图片。

【前端】 Layui点击图片实现放大、关闭效果_第1张图片

Html

签到二维码(放大)

js代码,获取点击图片的路径,修改样式 

$("#qrcode").click(function(){
       var imgSrc=$("#qrcode img").attr('src');
        // console.log(imgSrc)
        
        layer.open({
          type:1
          ,title:false
          ,closeBtn:0
          ,skin:'layui-layer-nobg'
          ,shadeClose:true
          ,content:'
' +' ' +'
签到二维码
' +'
' ,scrollbar:false }) })

JQ生成二维码参考:【前端】JQ生成二维码_下页、再停留的博客-CSDN博客JQ生成二维码。https://blog.csdn.net/qq_25285531/article/details/132223927

你可能感兴趣的:(前端技术,前端,layui,javascript)