跑马灯效果 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感受不太好，可是很是方便，若是有什么其余更好的建议或者批评，欢迎指正，谢谢啦，但愿你们喜欢~笔芯~

心绪时刻：

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