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

最新推荐文章于 2023-12-14 16:41:14 发布

路人甲JIA

最新推荐文章于 2023-12-14 16:41:14 发布

阅读量8.6k

点赞数 3

分类专栏： JavaScript 文章标签： mousemove javascript

本文链接：https://blog.csdn.net/u013719339/article/details/79136384

版权

JavaScript 专栏收录该内容

20 篇文章 1 订阅

订阅专栏

效果图

方法

文字跟随鼠标移动即是实时获取鼠标位置，并将文字的位置设置为鼠标的位置，用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。

路人甲JIA

关注

3
点赞
踩
18

收藏

觉得还不错? 一键收藏
9
评论
javascript文字跟随鼠标移动简易实现方法

效果图方法文字跟随鼠标移动即是实时获取鼠标位置，并将文字的位置设置为鼠标的位置，用left和top即可控制文字的位置。html hint为存放文字的div，必须设置position它才会跟随鼠标的位置移动而移动，一般用absolute。 &lt;div id="clickme1"&gt;点我DOM&lt;/div&gt;&lt;div id="clickme2"&g...
复制链接

扫一扫