前端實現文字跑馬燈的三種方式

付出發表於2018-11-05
前端

前言

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

首先，需求分析:

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

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

一、JS實現

思路:

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

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

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

效果圖

JS實現文字跑馬燈

註釋: 文字抖動現象是因為錄製時間過長，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效果圖

程式碼部分:

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

非常簡潔的程式碼~、~

marquee的API

marquee的API
雖然marquee標籤的api十分豐富，但是該標籤在MDN上是這樣描述的：

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實現

效果圖

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實現跑馬燈效果 html實現跑馬燈效果 css實現跑馬燈效果
需求點1 ✔️ ✘ ✔️
需求點2 ✔️ ✘ ✔️
相容性 ✔️ ✘ ✘

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

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

效果圖

CSS無縫滾動

程式碼部分

預覽Demo css無縫滾動動畫

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

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

關於我

參考

相關文章