js生成二维码 + 点击全屏放大

最新推荐文章于 2023-10-06 21:00:30 发布

一只野生程序猿啊

最新推荐文章于 2023-10-06 21:00:30 发布

阅读量4.1k

点赞数

分类专栏：前端文章标签： javascript css

本文链接：https://blog.youkuaiyun.com/qq_22638399/article/details/109239859

版权

前端专栏收录该内容

6 篇文章

订阅专栏

本文介绍如何使用JavaScript和QRCode库创建一个可以点击放大缩小的二维码，提供代码示例和视觉效果对比。通过`fullScreenQrcodeClick2`和`qrcodeClick2`函数，展示了在不同尺寸下展示和隐藏二维码的操作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Js生成二维码

效果图

左边是放大前右边是放大后

完整代码

<!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 = "order:11111111111";
        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>