javascript文字跟随鼠标移动简易实现方法

红太狼 2022-06-01 06:40 666阅读 0赞

## **效果图** ##

![SouthEast][]

## **方法** ##

文字跟随鼠标移动即是实时获取鼠标位置，并将文字的位置设置为鼠标的位置，用left和top即可控制文字的位置。

html

hint为存放文字的div，必须设置position它才会跟随鼠标的位置移动而移动，一般用absolute。

<div id="clickme1">点我DOM</div>
    <div id="clickme2">点我JQuery</div>
    <div id="hint" style="position: absolute;"></div>

上面是js的原生方法，下面是jquery方法，两个都可以直接调用执行。

//提示跟随鼠标移动而移动功能
    
    // DOM
    function WordsFollowMouseDOM(hintwords) {
        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 (hintwords) {
                case 1:
                myhint.innerHTML = "我是文字跟随鼠标1。";
                myhint.style.display = 'block';
                break;
                case 2:
                myhint.innerHTML = "我是文字跟随鼠标2。";
                myhint.style.display = 'block';
                break;
                default:
                myhint.innerHTML = "";
                myhint.style.display = 'none';
                break;
            }
        });
    }
    
    // JQuery
    function WordsFollowMouseJQuery(hintwords) {
        document.addEventListener("mousemove", function (e) {
            var myhint = $("#hint");
            $(myhint).css({
                "left": e.clientX + 8 + "px",
                "top": e.clientY + 2 + "px"
            });
            switch (hintwords) {
                case 1:
                    $(myhint).text("我是文字跟随鼠标3。");
                    $(myhint).css({"display":  "block"});
                    break;
                case 2:
                    $(myhint).text("我是文字跟随鼠标4。");
                    $(myhint).css({"display":  "block"});
                    break;
                default:
                    $(myhint).text("");
                    $(myhint).css({"display":  "none"});
                    break;
            }
        });
    }

$("#clickme1").click(function(){
        WordsFollowMouseDOM(1);
    });
    $("#clickme2").click(function(){
        WordsFollowMouseJQuery(1);
    });

完整代码为：   可直接使用

<!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="clickme1">点我DOM</div>
    	<div id="clickme2">点我JQuery</div>
    	<div id="hint" style="position: absolute;"></div>
    	<script type="text/javascript">
    	
    	//提示跟随鼠标移动而移动功能
    
    	// DOM
    	function WordsFollowMouseDOM(hintwords) {
    		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 (hintwords) {
    				case 1:
    				myhint.innerHTML = "我是文字跟随鼠标1。";
    				myhint.style.display = 'block';
    				break;
    				case 2:
    				myhint.innerHTML = "我是文字跟随鼠标2。";
    				myhint.style.display = 'block';
    				break;
    				default:
    				myhint.innerHTML = "";
    				myhint.style.display = 'none';
    				break;
    			}
    		});
    	}
    
    	// JQuery
    	function WordsFollowMouseJQuery(hintwords) {
    		document.addEventListener("mousemove", function (e) {
    			var myhint = $("#hint");
    			$(myhint).css({
    				"left": e.clientX + 8 + "px",
    				"top": e.clientY + 2 + "px"
    			});
    			switch (hintwords) {
    				case 1:
    				$(myhint).text("我是文字跟随鼠标3。");
    				$(myhint).css({"display":  "block"});
    				break;
    				case 2:
    				$(myhint).text("我是文字跟随鼠标4。");
    				$(myhint).css({"display":  "block"});
    				break;
    				default:
    				$(myhint).text("");
    				$(myhint).css({"display":  "none"});
    				break;
    			}
    		});
    	}
    
    
    
    	$("#clickme1").click(function(){
    		WordsFollowMouseDOM(1);
    	});
    	$("#clickme2").click(function(){
    		WordsFollowMouseJQuery(1);
    	});
    </script>
    </body>
    </html>

[下载完整代码learning-everything/javascript/word\_follow\_mouse][learning-everything_javascript_word_follow_mouse]。

[SouthEast]: /images/20220601/a009927732554d6d8db55b7e94c89a19.png
[learning-everything_javascript_word_follow_mouse]: https://github.com/Epulari/learning-everything/tree/master/javascript/word_follow_mouse