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

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

实现逻辑:二维码是使用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

相关推荐
Myli_ing1 分钟前
HTML的自动定义倒计时,这个配色存一下
前端·javascript·html
dr李四维19 分钟前
iOS构建版本以及Hbuilder打iOS的ipa包全流程
前端·笔记·ios·产品运营·产品经理·xcode
I_Am_Me_33 分钟前
【JavaEE进阶】 JavaScript
开发语言·javascript·ecmascript
雯0609~40 分钟前
网页F12:缓存的使用(设值、取值、删除)
前端·缓存
℘团子এ43 分钟前
vue3中如何上传文件到腾讯云的桶(cosbrowser)
前端·javascript·腾讯云
学习前端的小z1 小时前
【前端】深入理解 JavaScript 逻辑运算符的优先级与短路求值机制
开发语言·前端·javascript
前端百草阁1 小时前
【TS简单上手,快速入门教程】————适合零基础
javascript·typescript
彭世瑜1 小时前
ts: TypeScript跳过检查/忽略类型检查
前端·javascript·typescript
FØund4041 小时前
antd form.setFieldsValue问题总结
前端·react.js·typescript·html
Backstroke fish1 小时前
Token刷新机制
前端·javascript·vue.js·typescript·vue