zoukankan      html  css  js  c++  java
  • 模拟title实现提示功能

    模拟title实现提示功能,完整代码:

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8"/>
        <title>文字跟随鼠标</title>
        <meta name="viewport" content="width=device-width"/>
        <script src="http://code.jquery.com/jquery-3.2.1.min.js"></script>
    </head>
    <body>
        <div id="hint" style="position: absolute;padding:5px 10px;font-size:13px; border-radius:5px;background:rgba(91,91,91,0.6);color:#fff;display:none"></div>
        <div  onmouseover="mytips(1,'恭喜你,出来了!')" onmouseout="mytips(0)">点我DOM</div>
        <div  onmouseover="mytips_jquery(1,'我是Jquery,这个提示不错吧!')" onmouseout="mytips(0)">点我JQuery</div>
        
        <script type="text/javascript">
        
        //提示跟随鼠标移动而移动功能
        // DOM
        function mytips(isshow,words) {
            document.addEventListener("mousemove", function (e) {
                var myhint = document.getElementById("hint");
                myhint.style.left = e.clientX + 8 + "px";
                myhint.style.top = e.clientY + 2 + "px";
                switch (isshow) {
                    case 1:
                    if(words){
                        myhint.innerHTML = words;
                    }
                    myhint.style.display = 'block';
                    break;
                    case 0:
                    myhint.style.display = 'none';
                    break;
                    default:
                    myhint.style.display = 'none';
                    break;
                }
            });
        }
     
        // JQuery
        function mytips_jquery(isshow,words) {
            document.addEventListener("mousemove", function (e) {
                var myhint = $("#hint");
                $(myhint).css({
                    "left": e.clientX + 8 + "px",
                    "top": e.clientY + 2 + "px"
                });
                switch (isshow) {
                    case 1:
                    if(words){
                        $(myhint).text(words);
                    }
                    $(myhint).css({"display":  "block"});
                    break;
                    case 0:
                    $(myhint).css({"display":  "block"});
                    break;
                    default:
                    $(myhint).css({"display":  "none"});
                    break;
                }
            });
        }
    
    </script>
    </body>
    </html>
  • 相关阅读:
    CVE-2019-0708
    windows powershell的常用命令
    sqli-lab(8)
    DVWA--CSP Bypass
    认清自己
    sqli-libs(7)
    DVWA--upload
    sqli-labs(6)
    python学习之路(22)
    BZOJ2434:[NOI2011]阿狸的打字机——题解
  • 原文地址:https://www.cnblogs.com/huangzhen22/p/12191703.html
Copyright © 2011-2022 走看看