您的位置：首页 > Web前端 > JavaScript

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

2018-01-23 10:29 911 查看

效果图

方法

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

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航