模拟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 id="clickme1" onmouseover="mytips(1,'恭喜你，出来了！')" onmouseout="mytips(0)">点我DOM</div>
    <div id="clickme2" 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>
模拟title实现提示功能

猜你喜欢
