HTML文字波浪形移动和复原

最新推荐文章于 2023-02-20 15:39:56 发布

霜月枫桥

最新推荐文章于 2023-02-20 15:39:56 发布

阅读量888

点赞数

分类专栏： Web前台demo小记

本文链接：https://blog.csdn.net/MOONCOM/article/details/78541375

版权

Web前台demo小记专栏收录该内容

22 篇文章 3 订阅

订阅专栏

代码如下所示：

<!DOCTYPE html>
<html lang="zh-cn">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
	html,body{
		height:100%;
	}
/* 	#demop{
	position:absolute;
} */
	#demop span{
		position:relative;
	}
	</style>
</head>
<body>
	<p id="demop">江南皮革厂！江南皮革厂倒闭了！王八蛋黄鹤欠了我们3.5个亿，跟着他的小姨子跑了。</p>
	<script>
	var reset=null;		/*复位用的计时器变量*/
	

	var locations={		/*记录当前鼠标的位置信息*/
		left:0,
		top:0
	};
	var localArr=[];     /*记录一段时间内鼠标移动的位置，长度为文字的个数*/
	var arrLength=0;	 /*一段时间内鼠标移动位置的个数*/

	class init{			 /*初始化段落文字，将其分割并封装在<span></span>中*/
		constructor(node){
			var arr=node.innerHTML.split("");
			arrLength=arr.length;
			
			for(var i=0;i<arrLength;i++){
				localArr.push({left:0,top:0});
			}

			arr=arr.map(function(value){
				/*return value="<span>"+value+"</span>";*/
				return value=`<span>${value}</span>`;
			});
			//console.log(arr);
			node.innerHTML=arr.join("");
		}
	}

	var demop=document.getElementById("demop");
	new init(demop);
	var aSpan=demop.children;

	function pMove(lt){			/*当鼠标移动时，触发的文字渲染方法*/
		localArr.unshift(lt);
		//console.log(localArr);
		[].forEach.call(aSpan,function(value,index,item){
			value.style.left=localArr[index].left+"px";
			value.style.top=localArr[index].top+"px";
			value.style.transition="0s 0s";
		});
		
		(localArr.length>aSpan.length)&&(localArr.pop());
	}

	document.body.addEventListener("mousemove",function(e){			/*获取鼠标当前的位置*/
		clearTimeout(reset);
		locations={
			left:e.clientX,
			top:e.clientY
		};
		pMove(locations);
		reset=setTimeout(function(){			/*当鼠标停止时间超过0.5秒时，触发的事件*/
			for(var i=0;i<arrLength;i++){
				localArr[i]=locations;
			}
			//console.log(localArr);
			[].forEach.call(aSpan,function(value,index,item){
				value.style.left=localArr[index].left+"px";
				value.style.top=localArr[index].top+"px";
				value.style.transition=".2s "+(index*0.03)+"s";
			});
		},500);
	});

	</script>
</body>
</html>

效果图如下：

霜月枫桥

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
HTML文字波浪形移动和复原

代码如下所示： Document html,body{ height:100%; }/* #demop{ position:absolute;} */ #demop span{ position:relative; } 江南皮革厂！江南皮革厂倒闭了！王八蛋黄鹤欠了我们3.5个亿，跟着他的小姨子跑了。 var reset=null; /*复
复制链接

扫一扫