实现效果:点击图片实现放大,点击空白处关闭效果。下图。
实现逻辑:二维码是使用JQ插件生成的,点击二维码,获取图片路径,通过Layui的弹窗显示放大后的图片。
Html
html
<div id="qrcode" class="pi-codeimg-open" style="width:1.5rem;height:1.5rem;margin:0 auto"></div>
<div style="font-size:0.22rem; width:1.8rem; text-align:center; margin:0 auto">签到二维码(放大)</div>
js代码,获取点击图片的路径,修改样式
javascript
$("#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:'<div style="border:0px solid red;width:100%; padding:10px;border-radius:15px; "> '
+' <img src="'+imgSrc+'" style="width:3.5rem; height:3.5rem" > '
+' <div style="text-align:center; height:0.5rem; line-height:0.6rem">签到二维码</div> '
+' </div>'
,scrollbar:false
})
})
JQ生成二维码参考:【前端】JQ生成二维码_下页、再停留的博客-CSDN博客JQ生成二维码。https://blog.csdn.net/qq_25285531/article/details/132223927