跑马灯效果 js + css 实现

后台传过来一个list数组，需要我实现一个跑马灯效果。

我想了想，用css3吧，方便快捷。

然鹅，

我怎么知道后台给我传多少要滚动的数组呢？

所以list数组是动态变化的，我只有动态的去改变滚动时间。我能想到最简单的跑马灯效果，就是用css的translateX，让一行文字平滑的一直向左滚动就OK啦。这是一组动画，那就用css3里的animation，设置滚动的时间即可。

想得倒是挺美的~~~

实际上代码吧：

css里首先要把list数组的滚动的每列横着一行排出来，动画效果就是滚动这一行。

以下是js代码：
const marqueeStyleArr = document.getElementsByClassName('marquee');  // 拿到要滚动的dom

 for (let i = 0; i < marqueeStyleArr.length; i++) {  // 累加出总的所有List里面的宽度，才好知道到底要滚动多长
   this.translateX = this.translateX + marqueeStyleArr[i].clientWidth;  
 }
 
 // 创建一个动画效果keyFrames， this.translateX就是整个一行的宽度
 const keyFrames = ` 
        @keyframes marquee1 {
          0% {
            transform: translateX(0);
          }
          100% {
            transform: translateX(-${this.translateX}px);
          }
        }
        `;

 for (let i = 0; i < marqueeStyleArr.length; i++) {  // 让每数组里的每项都滚动起来，所以来了个for循环
   const style = document.createElement('style'); // 创建一个style标签
   style.innerHTML = keyFrames; 
   marqueeStyleArr[i].appendChild(style); // 把style插进dom里
   marqueeStyleArr[i].style.animation = `${this.translateX / 46}s marquee linear infinite normal`;  // 设置动画的各项属性
 }

微微向上的嘴角，来自小火柴的凝视~~

不要方~，也不要脑壳痛，其实灰常简单啦~

以上代码可以简单总结成一句话：

就是用js创建一个keyFrames，

然后把它用innerHTML的方式加到要滚动的dom上，

在通过style加上animation,

里面的滚动位置和滚动时间都是根据后台返回来的list数组长度决定的。

除以46s 是我个人觉得这个比较合适。你自己也可以除以其他的数字，反正就是速度不一样而已。

很鸡贼~~~

其实这种直接操作DOM感觉不太好，但是非常方便，如果有什么其他更好的建议或者批评，欢迎指正，谢谢啦，希望大家喜欢~笔芯~

心绪时刻：

今天成都的雾霾真大~~，这是别人拍的环球中心