在线观看不卡亚洲电影_亚洲妓女99综合网_91青青青亚洲娱乐在线观看_日韩无码高清综合久久

鍍金池/ 問答/HTML/ html如何實現(xiàn)點擊文字彈出二維碼圖片

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

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

回答
編輯回答
病癮

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

2018年7月8日 03:23
編輯回答
心夠野

其實就是點擊，讓一個全面的半透明蒙層顯示，其中有一個絕對居中的二維碼圖片。

2018年2月3日 00:54
編輯回答
陌如玉

我想樓主需要這個 鏈接描述

進入這個鏈接,找到 相冊層 這個按鈕,就是你想要的效果

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>

參考

多個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