zoukankan      html  css  js  c++  java
  • 动态创建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>

  • 相关阅读:
    Math.pow
    css3正方体
    制作一个百度换肤效果
    排他思想
    js栈和堆的区别
    js创建对象的几种方式(工厂模式、构造函数模式、原型模式)
    短网址
    this
    作用域
    JS 函数基础
  • 原文地址:https://www.cnblogs.com/shinelhui/p/3171925.html
Copyright © 2011-2022 走看看