js生成二维码点击可放大

淡淡的烟草味﹌ 2022-11-20 08:13 117阅读 0赞

# 效果 #

![20201027163155647.png][]

点击放大

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0NDkxNTA4_size_16_color_FFFFFF_t_70][]

# 代码 #

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
            "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ko" lang="ko">
    <head>
        <title>二维码点击放大demo</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
        <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no"/>
        <script type="text/javascript" src="http://static.runoob.com/assets/jquery/2.0.3/jquery.min.js"></script>
        <script type="text/javascript" src="http://static.runoob.com/assets/qrcode/qrcode.min.js"></script>
        <style type="text/css">
            body {
                margin: 0px;
            }
    
            .qrcode_img {
                /*display: inline !important;*/
                /*display: block;*/
                margin: 0 auto;
                border:1px solid #f6f6f6;
            }
    
            .qrcode_img_big {
                position: absolute;
                /*top: 50%;*/
                left: 50%;
                transform: translateX(-50%);
                /*width: 50px;*/
                /*height: 50px;*/
                border:1px solid #f6f6f6;
            }
    
            #qrcode {
                /*width:100px;*/
                /*height:100px;*/
                width: 100%;
                margin-top:15px;
                text-align: center;
                justify-content: center;
                display: flex !important;
            }
    
            .fullScreenQrcode2{
                width:100%;
                height:100%;
                background-color:#2D3132;
                z-index:999;
                overflow:hidden;
                position:absolute;
            }
            .fullScreenQrcode2 div{
                position:relative;
                top:30%;
                text-align:center;
            }
    
        </style>
    </head>
    <body>
    
    <div onclick="fullScreenQrcodeClick2()" class="fullScreenQrcode2" style="display:none;"><div id="bigQRCode"></div></div>
    
    <div class="myout">
        <div>点击二维码可放大缩小</div>
        <div id="qrcode" style="margin-top:15px;" onclick="qrcodeClick2()"></div>
    </div>
    
    <script type="text/javascript">
    
        $(function () {
            renderQrCode();
    
        });
    
        function renderQrCode() {
            var qrcode = new QRCode(document.getElementById("qrcode"), {
                width: 100,
                height: 100
            });
            //生成二维码
            var elText = "111111111";
            qrcode.makeCode(elText);
    
            var bigQRCode = new QRCode(document.getElementById("bigQRCode"), {
                width : 200,
                height : 200
            });
            bigQRCode.makeCode(elText);
    
            //二维码居中
            // $("#qrcode img").addClass("qrcode_img");
            $("#bigQRCode img").addClass("qrcode_img");
        }
    
        function fullScreenQrcodeClick2(){
            $('.fullScreenQrcode2').hide();
            $('.myout').css("overflow","");
            $('.myout').css("width","");
            $('.myout').css("height","");
        }
        function qrcodeClick2(){
            $('.fullScreenQrcode2').show();
            $('.myout').css("overflow","hidden");
            $('.myout').css("width","100%");
            $('.myout').css("height","100%");
        }
    </script>
    </body>
    </html>

[20201027163155647.png]: /images/20221120/bc5e901e04ca420281291ce670bc8d32.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0NDkxNTA4_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/2020102716331048.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0NDkxNTA4,size_16,color_FFFFFF,t_70