• 还有半个月就走了…挺好的.
  • 无聊啊,最近也没啥更新的.
  • 妈的,写之前不说,写完了了你说不行.中途我还问你你说对.你真是中国第一Monkey
  • 沃妮马,过的真快!转眼又上班了.等待十月一.
  • 还有1天就是端午节了.过的真快, 在这个公司工作半年啦..
  • 咦~哪个弟弟CC我呢?
  • 简单,简单.我提个思路.
  • 不算今天还有2天就放假了.
  • 一切随缘,随波逐流.
  • 我的天啊,手欠把写了两天的项目删除了,回收站都没有!真是一干二净!心态爆炸!

Mr.F – 简易的JavaScript文字跟随鼠标移动特效

JavaScript Mr.F 1年前 (2018-09-18) 70796次浏览 已收录 0个吐槽 扫描二维码

不多 BB,直接上图
Mr.F - 简易的 JavaScript 文字跟随鼠标移动特效

代码:

<!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 = '这是<a href="https://blog.kieng.cn/tag/javascript" title="查看更多关于 JavaScript 的文章" target="_blank">JavaScript</a>写出来的文字跟随鼠标移动特效哈哈哈哈哈哈哈----By:<a href="https://blog.kieng.cn/tag/mr-f" title="查看更多关于 Mr.F 的文章" target="_blank">Mr.F</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>

在线演示:
在线演示


KIENG , 版权所有丨如未注明 , 均为原创丨本网站采用BY-NC-SA 4.0协议进行授权
转载请注明原文链接:Mr.F – 简易的 JavaScript 文字跟随鼠标移动特效
本文章链接:https://blog.kieng.cn/184.html
喜欢 (0)
Mr.F
关于作者:
这个人很帅,什么都没有留下。
发表我的评论
取消评论
表情 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 快速获取昵称
  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址