前言

最近寫了一個文字跑馬燈的專案需求，剛開始用js寫，能夠完成需求。後面想著換種方式(分別是html和css)來實現同一個需求,以減少效能消耗。

首先，需求分析:

需求點1.判斷文字的長度和容器的長度，如果文字長度大於容器長度則開始滾動，否則不滾動；

需求點2.判斷滾動滾動的結束，在結束的時間點觸發事件(比如: 增減樣式等操作)；

一、JS實現

思路:

1.判斷文字的長度和容器的長度，如果文字長度大於容器長度，則開始滾動，否則不滾動。(offsetWidth)

2.獲取滾動條到元素左邊的距離,遞迴滾動,直到滾動後的距離等於文字的長度退出遞迴。(scrollLeft)

如果不熟悉offsetWidth，scrollLeft，您可以點選這裡

效果圖

註釋: 文字抖動現象是因為錄製時間過長，ps製作gif檔案只能是500幀以下，通過降低幀率才出現了文字抖動。 程式碼部分

預覽Demo：JS實現文字跑馬燈

小結

js的方式能夠完美的滿足子需求點1和自需求點2。

判斷文字和容器的長度可以通過offsetWidth來判斷。如果文字長度大於容器長度，則開始滾動。

window.onload=function checkScrollLeft(){
  // 判斷文字長度是否大於盒子長度
  if(boxWidth >= textWidth){ return false
 
}
  content.innerHTML += content.innerHTML
  document.querySelector('.text').classList.add('padding')
  // 更新
  textWidth = document.querySelector('.text').offsetWidth
  // 開始滾動  觸發事件
  toScrollLeft()
}
複製程式碼

判斷滾動的結束根據滾動條到元素左邊的距離和文字的長度判斷，如果滾動條到元素左邊的距離等於文字的長度，則結束滾動。

function toScrollLeft(){
  //  如果文字長度大於滾動條距離，則遞迴拖動
 

  if(textWidth > box.scrollLeft){
    box.scrollLeft++
    setTimeout('toScrollLeft()', 18);
  }
  else{
    // 滾動結束 觸發事件
  }
}
複製程式碼

二、HTML實現

效果圖:

程式碼部分:

  <marquee behavior="behavior" width="200" loop="2">1.文字如果超出了寬度自動向左滾動文字如果超出了寬度自動向左滾動。</marquee>
複製程式碼

非常簡潔的程式碼~、~

marquee的API

This feature is obsolete. Although it may still work in some browsers, its use is discouraged since it could be removed at any time. Try to avoid using it.

元素已經過時，請不要再使用。儘管一些瀏覽器仍然支援它，但它不是必須的。此外，使用這個元素基本上是你可以對你的使用者做最糟糕的事情之一，所以請不要這樣做。

所以，根據咱們IT圈內的緊跟文件標準的原則，對marquee標籤，我們在專案中請儘量不要使用

三、CSS實現

效果圖

程式碼部分

預覽Demo: CSS實現文字跑馬燈

小結

CSS能滿足需求點1，能夠判斷什麼時候開始滾動。

window.onload=function checkScrollLeft(){
  // 判斷文字長度是否大於盒子長度
  if(textWidth > wrapWidth) {
    // 開始滾動  觸發事件
    text.style.paddingRight = '300px'
    cont.style.left = "-870px"
  }
}
複製程式碼

同時，也能滿足需求點2，判斷滾動的結束。

// 滾動結束
document.addEventListener("transitionend", function (){
    console.log("end")
}, false)
複製程式碼

結語

回顧需求

需求點1.判斷文字的長度和容器的長度，如果文字長度大於容器長度則開始滾動，否則不滾動；

需求點2.判斷滾動滾動的結束，在結束的時間點觸發事件(比如: 增減樣式等操作)；

實現方式的優劣對比

如果需要滿足需求，js和css都能夠實現。但是考慮到相容性，css在ios9以下，安卓4.4以下不支援，其他好的解決方案在考慮中。如果你有好的解決方案，歡迎在下方留言與我交流~

另外，css用作單純的展示效果用還是能優先考慮的，比如下方的css無縫滾動

效果圖

程式碼部分

預覽Demo css無縫滾動動畫

所以，工具本身沒有優劣之分，什麼時候用什麼工具。我們要有清晰的思路。

-------------------------華麗的分割線--------------------

關於我

• 我的github主頁(點選進入)
• 我的公眾號(點選進入)
• 我的掘金主頁(點選進入)
• 我的簡書主頁(點選進入)

參考

• w3c最新標準

• HTML_製作滾動字幕_marquee標籤