【前端】 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

相关推荐
科技探秘人8 分钟前
Chrome与火狐哪个浏览器的隐私追踪功能更好
前端·chrome
科技探秘人8 分钟前
Chrome与傲游浏览器性能与功能的深度对比
前端·chrome
JerryXZR14 分钟前
前端开发中ES6的技术细节二
前端·javascript·es6
七星静香15 分钟前
laravel chunkById 分块查询 使用时的问题
java·前端·laravel
q24985969318 分钟前
前端预览word、excel、ppt
前端·word·excel
小华同学ai24 分钟前
wflow-web:开源啦 ,高仿钉钉、飞书、企业微信的审批流程设计器,轻松打造属于你的工作流设计器
前端·钉钉·飞书
problc28 分钟前
Flutter中文字体设置指南:打造个性化的应用体验
android·javascript·flutter
Gavin_91532 分钟前
【JavaScript】模块化开发
前端·javascript·vue.js
懒大王爱吃狼2 小时前
Python教程:python枚举类定义和使用
开发语言·前端·javascript·python·python基础·python编程·python书籍
待磨的钝刨3 小时前
【格式化查看JSON文件】coco的json文件内容都在一行如何按照json格式查看
开发语言·javascript·json