动态创建div(鼠标放上显示二维码)

最近的微信大行其道。各个网站上都给出的微信验证码,进行手机扫描加入。

怎么创建类似与点击鼠标弹出一个浮动的div显示二维码的这种效果。

1.首先制作好这样的图片,写css样式

<style type="text/css">
        #tip
        {
            position: absolute;
            border: 1px solid #ccc;
            display: none;
        }
    </style>
View Code

2.写javascript

    <script type="text/javascript">
        $(function () {
            $(function () {
                var x = 10;
                var y = 20;
                $("#weixin").mouseover(function (e) {
                    var tip = "<div id='tip'><img src='images/0.jpg'/></div>";
                    $("body").append(tip);
                    $("#tip").css({ "top": (e.pageY + y) + "px", "left": (e.pageX + x) + "px" }).show("fast");
                }).mouseout(function () {
                    $("#tip").remove();
                }).mousemove(function (e) {
                    $("#tip").css({ "top": (e.pageY + y) + "px", "left": (e.pageX + x) + "px" });
                });
            })
        })
    </script>
View Code

3.写上标签,把标签的名字Id为weixin。

<span id="weixin" style="cursor:pointer">点击此处查看</span>

原文地址:https://www.cnblogs.com/shinelhui/p/3171925.html