<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<style type='text/css'>
.flotage{
font-size:20px;
color:green;
font-family:'kaiti'
}
.flotage span{
position:relative;
}
</style>
<title>海草海草海草---飘起来</title>
</head>
<body>
<div class="flotage">
<p>
♣♣♣♣♣♣♣♣♣♣♣♣♣♣♣♣♣♣♣♣♣♣♣♣♣♣♣♣♣♣♣♣♣♣♣♣♣♣♣♣♣♣♣♣♣♣♣♣♣♣♣♣♣♣♣♣♣♣♣
</p>
</div>
</body>
<script type='text/javascript'>
var pos=[];
class Flotage{//es6对象
constructor(ele){//构造器 类的基础辨识符
this.init(ele);//对象初始化
}
//行为-初始化
init(ele){
//DOM节点
this.ele=ele||document.querySelector('p');
this.units=this.ele.innerText.split('');//分片数组
this.len=this.units.length;//文本分片数组长度
//单元路径
this.path=new Array(this.len).fill({x:0,y:0});
//清除原文
this.ele.innerText="";
//console.log(this.ele);
}
//整理文本
format(){
var fragment=document.createDocumentFragment();//文档片段(油桶过渡)
this.units=this.units.map(item => {
//创建一个span节点对象
var oSpan=document.createElement('span');
//span的文本内容=数组中的文本元素
oSpan.innerText=item;
//向文档片段中添加span标签
fragment.appendChild(oSpan);
return oSpan;
});
//将文本片段一次性导入this.ele中
this.ele.appendChild(fragment);
//console.log(this.units);
}
//行为-排列DOM
queue(){
for(var i=0,item;item=this.units[i++];){
//console.log(this.units[i]);
item.style.top=this.path[this.len-i].y+'px';
item.style.left=this.path[this.len-i].x+'px';
}
}
//行为-跑
move(pos){
this.path.push(pos);//添加路径数组, push后入 队列
//console.log(this.path);
//判断当前路径数组长度>单元长度 前出
(this.path.length>this.len)&&(this.path.shift());
flotage.queue();
//console.log(this.path);
}
}
var flotage=new Flotage(document.querySelector('p'));
flotage.format();
//监听DOM文档
document.addEventListener('mousemove',function(e){
pos={
x:e.clientX,
y:e.clientY
}
flotage.move(pos);
})
document.addEventListener('mouseout',function(e){
console.log(e.clientY);
if(e.clientY<0||e.clientY>window.innerHeight){window.location.reload();}
})
</script>
</html>
效果:鼠标移动,海草会跟着移动
代码实例下载:链接:https://pan.baidu.com/s/1x-RemNfEVJx--fvsVn9z5A
提取码:hoxg
复制这段内容后打开百度网盘手机App,操作更方便哦