我看到了一些东西在看淘宝前端团队的博客的时候，不小心点到了关于我们的页面，有一个我觉得是的动画很有意思也很常用，感觉哪里都可以用，效果如下图：每次刷新头像和‘你’的位置都不一样。说实话，我觉得挺有意思的，所以自己尝试实现了。下面我就从我的角度来分析和实现这样一个效果，因为我不知道FED他们是怎么实现的。我应该怎么办？先分析一下小方块的结构，即：![]()
img是头像，span控制背景色，i用来做镜像效果.我们知道这样一个效果，我是近视的，十米开外的那种男女，再看看这个布局，看着很眼熟，我看到的结构大概是这样的感觉['','xxxxxxxxx','xxxx','xxxxxxx','xxxx','xxxxxxxxx','',]嘿嘿，这不就是一个字符串数组吗？那我就把它当成一个二维数组，是不是很容易把要显示的字符的横坐标和纵坐标找出来呢？不要急于卷起袖子去做。根据我多年不想挽起袖子的经验，你就是在做。每个正方形都是阵列的一个个体。想到这里，我算了一下大概需要126个方格，格子的布局是7*18，算了一下好像要写126个span标签，像这样：万能编辑器，后来发现我能span*126+tab，机智如我，受宠若惊。啊？你问我如何制作上面的跨度。妈的，当然是手打的慢。呃，我觉得还是用js生成比较好。很方便，代码量也少很多。好的，让我们卷起袖子去做吧：constfaceList=(newArray(126)).map(()=>{constface=document.createElement("span");//...returnface;});document.body.append(faceList);我们打开网页：这是什么东西？好了，不好玩了，举个例子，现在想创建一个长度为十的数组，数组成员都是对应的下标，怎么办？constarr=(newArray(10)).map...打住，正确的姿势是这样的：Array.from({length:10},(v,i)=>i);//第一个Array.apply(null,{length:10}).map(//...);//第二种//欢迎补充当然也可以使用递归的方式。个人一直使用第一种方法，感觉比较好用，我们重新实现一下：constfaceList=Array.from({length:126},()=>{constface=document.createElement("span");constimg=document.createElement("img");consti=document.createElement("i");i.style.left='-100%';face.append(img);face.append(i);返回面;});将dom渲染到页面，然后找到我们要渲染的字符的位置：','',];让EOIArr=[];EOITextArr.forEach((v,i)=>{for(letj=1;j{constlength=textArr.length;constshowNumber=textArr.splice(Math.random()*length,1);spanEles[showNumber].style.backgroundColor='#F40';iEles[showNumber].style.left='100%';if(!textArr.length){clearInterval(colorTimer);showImg();}},25);背景色全部改变后，我们就需要启动图片的定时器，图片的src也是随机的：constshowImg=()=>{constimgTimer=setInterval(()=>{constlength=imgArr.length;const[showNumber]=imgArr.splice(Math.random()*length,1);const[imgIndex]=imgSrc.splice(Math.random()*imgSrc.length,1);imgEles[showNumber.src=imgList[imgIndex];imgEles[showNumber].style.display='inline';spanEles[showNumber].style.backgroundColor='#fff';iEles[showNumber].style.left='-100%';if(!imgArr.length){spanEles[showNumber].classList.add('you');cl耳朵间隔（imgTimer）；}},25);}当图片到最后一张时，会显示'你'的效果，收工。因为实在不想找那么多图片，只复制了十份，然后乘以3，所以会出现一个头像重复三次的情况，源码。一个小小的尝试，觉得很有意思，感谢阅读~
