网页特效 简易的JavaScript文字跟随鼠标移动特效
导读：网页特效 简易的JavaScript文字跟随鼠标移动特效可以使用JavaScript的mousemove事件监听鼠标移动事件，并根据鼠标的坐标改变文字的位置。以下是一个简单的实现方法：在HTML文件中创建一个元素用于显示文字，如一个div元素：<div id="follow-text">跟随鼠标移动的文字</div>...
网页特效 简易的JavaScript文字跟随鼠标移动特效
可以使用JavaScript的mousemove事件监听鼠标移动事件，并根据鼠标的坐标改变文字的位置。以下是一个简单的实现方法：
在HTML文件中创建一个元素用于显示文字，如一个div元素：
<div id="follow-text">跟随鼠标移动的文字</div>
复制代码
在JavaScript文件中添加以下代码：
// 获取文字元素
var text = document.getElementById('follow-text');
// 监听鼠标移动事件
document.addEventListener('mousemove', function(event) {
// 获取鼠标的坐标
var x = event.clientX;
var y = event.clientY;
// 设置文字的位置为鼠标的坐标
text.style.left = x + 'px';
text.style.top = y + 'px';
});
复制代码
这样，文字元素就会跟随鼠标的移动而改变位置。你可以根据需要自定义文字元素的样式和初始位置
如下图：
实现代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.sp{
font-size:30px;
font-family: 楷体;
color:#00A1d6;
font-weight:700;
position:absolute;
top:-50px;
}
</style>
</head>
<body>
<script type="text/javascript">
var str = '这是JavaScript写出来的文字跟随鼠标移动特效哈哈哈哈哈哈哈----</a>';
var colorarr = ['pink','red','blue','lightgreen','yellow','orange','#00A1d6','violet'];//随机颜色数组
var a = 30;
for (var i = 0; i < str.length; i++) {
document.write('<span id="str' + i + '" class="sp">');
document.write(str[i]);
document.write('</span>');
}
document.onmousemove = function(e){
var e = e || event;
document.title = e.clientX + ' - ' + e.clientY;
var m = 0;
var timmer = setInterval(function(){
if (m < str.length) {
span = document.getElementById('str' + m);
var s = Math.floor(Math.random()*colorarr.length);//随机颜色下标
span.style.color = colorarr[s];//赋予颜色
span.style.left = parseInt(e.clientX) + (m*30) + 'px';
span.style.top = e.clientY + 'px';
m++;
}else{
clearInterval(timmer);
}
},100);
}
</script>
</body>
</html>Hackyh'Blog版权声明：以上内容作者已申请原创保护，未经允许不得转载，侵权必究！授权事宜、对本内容有异议或投诉，敬请联系网站管理员，我们将尽快回复您，谢谢合作！