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>
相关文章推荐
- javascript实现图片跟随鼠标移动效果的方法
- javascript实现图片跟随鼠标移动效果的方法
- JavaScript实现跟随鼠标移动而移动的文字
- js实现文字跟随鼠标移动而移动的方法
- 文字或图片跟随鼠标移动或键盘控制图片移动实例(javascript实现)
- js实现文字跟随鼠标移动而移动的方法
- javascript实现鼠标移到Image上方时显示文字效果的方法
- JavaScript实现文字跟随鼠标特效
- JavaScript-跟随鼠标移动的文字
- [JavaScript]简单跟随鼠标移动的文字
- 仿265网址导航logo的两只眼睛跟随鼠标移动js实现方法
- 仿265网址导航logo的两只眼睛跟随鼠标移动js实现方法
- 实现文字跟随鼠标移动--[转]
- javascript实现鼠标移到Image上方时显示文字效果的方法
- 完整的html+css+javascript实现跟随鼠标移动显示选中效果
- JavaScript简单实现鼠标移动切换图片的方法
- JavaScript简单实现鼠标移动切换图片的方法
- 基于JavaScript实现鼠标悬浮弹出跟随鼠标移动的带箭头的信息层
- 基于JavaScript实现鼠标悬浮弹出跟随鼠标移动的带箭头的信息层
- JavaScript实现文字跟随鼠标特效