海草海草-飘啊飘 js特效实例

最新推荐文章于 2021-05-30 21:28:49 发布

qiufengwuxiu

最新推荐文章于 2021-05-30 21:28:49 发布

阅读量613

点赞数

本文链接：https://blog.csdn.net/qiufengwuxiu/article/details/79626780

版权

<!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，操作更方便哦

qiufengwuxiu

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
海草海草-飘啊飘 js特效实例

&lt;!doctype html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="Generator" content="EditPlus®"&gt; &lt;meta name="Author"
复制链接

扫一扫