效果
点击放大
<!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>
