跑馬燈效果 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感受不太好，可是很是方便，若是有什麼其餘更好的建議或者批評，歡迎指正，謝謝啦，但願你們喜歡~筆芯~

心緒時刻：

今天成都的霧霾真大~~，這是別人拍的環球中心