html如何實(shí)現(xiàn)點(diǎn)擊文字彈出二維碼圖片

我做了一個(gè)HTML頁，想在文字插入一個(gè)代碼，實(shí)現(xiàn)點(diǎn)擊 “文字”就會(huì)全屏談出一個(gè)二維碼圖片，不知怎么實(shí)現(xiàn)，那位大神知道嗎，告知下怎么編寫這個(gè)代碼。
比如這樣：https://www.pandateacher.com/

回答

編輯回答

病癮

二維碼可以用qrcode生成，動(dòng)畫效果可以用css3或者插件，生成的二維碼放在一個(gè)新的全屏的透明的div中，劇中顯示

2018年7月8日 03:23

編輯回答

心夠野

其實(shí)就是點(diǎn)擊，讓一個(gè)全面的半透明蒙層顯示，其中有一個(gè)絕對(duì)居中的二維碼圖片。

2018年2月3日 00:54

編輯回答

陌如玉

我想樓主需要這個(gè) 鏈接描述

進(jìn)入這個(gè)鏈接,找到相冊(cè)層這個(gè)按鈕,就是你想要的效果

2017年7月19日 10:51

編輯回答

孤客

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>

    <style>
        #main {
            margin-top: 50px;
            border: 1px solid black;
            cursor: pointer;
        }

        #qrcode img {
            position: absolute;
            top: 50%;
            left: 50%;
            width: 100px;
            height: 100px;
            display: block;
        }

        #qrcode {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(255, 255, 255, 0.6);
            z-index: 9999;
            display: none;
        }
    </style>

    <script src="http://code.jquery.com/jquery-3.2.1.js" integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE=" crossorigin="anonymous"></script>
</head>
<body>
    <button id="main">你是想要這種效果嗎？？？</button>
    
    <div id="qrcode">
        <img id="image" width="100%" height="100%" src="https://jkooll.github.io/src/images/wechat_qrcode.jpg">
    </div>

    <script>
        $(function() {
            $("#main").click(function() {
                $("#qrcode").fadeIn("slow");
            });

            $("#qrcode").click(function() {
                $("#qrcode").fadeOut("slow");
            })
            
        });
    </script>
</body>
</html>

參考

jquery fadeIn http://api.jquery.com/fadeIn/
jquery fadeOut http://api.jquery.com/fadeOut/

多個(gè)qrcode

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>

    <style>
        .qrcode_button {
            margin-top: 50px;
            border: 1px solid black;
            cursor: pointer;
        }

        .qrcode {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(255, 255, 255, 0.6);
            z-index: 9999;
            display: none;
        }

        .qrcode img {
            position: absolute;
            top: 50%;
            left: 50%;
            width: 100px;
            height: 100px;
            display: block;
        }
    </style>

    <script src="http://code.jquery.com/jquery-3.2.1.js" integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE=" crossorigin="anonymous"></script>
</head>
<body>
    <button class="qrcode_button" value="#qrcode1">qrcode 1</button>

    <button class="qrcode_button" value="#qrcode2">qrcode 2</button>

    <button class="qrcode_button" value="#qrcode3">qrcode 2</button>
    
    <div class="qrcode" id="qrcode1">
        <img id="image" width="100%" height="100%" src="https://jkooll.github.io/src/images/wechat_qrcode.jpg">
    </div>

    <div class="qrcode" id="qrcode2">
        <img id="image" width="100%" height="100%" src="https://jkooll.github.io/src/images/wechat_qrcode.jpg">
    </div>

    <div class="qrcode" id="qrcode3">
        <img id="image" width="100%" height="100%" src="https://jkooll.github.io/src/images/wechat_qrcode.jpg">
    </div>

    <script>
        $(function() {
            $(".qrcode_button").click(function() {
                $($(this).val()).fadeIn("slow");
            });

            $(".qrcode").click(function() {
                $('#' + $(this)[0].id).fadeOut("slow");
            })
            
        });
    </script>
</body>
</html>

2018年9月20日 02:07