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

前言

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

首先，需求分析:

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

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

1、JS實現

思路:

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

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

若是不熟悉offsetWidth，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{
    // 滾動結束 觸發事件
  }
}
複製代碼

2、HTML實現

效果圖:

代碼部分:

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

很是簡潔的代碼~、~

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標籤，咱們在項目中請儘可能不要使用

3、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無縫滾動

效果圖

代碼部分

預覽Demo css無縫滾動動畫

因此，工具自己沒有優劣之分，何時用什麼工具。咱們要有清晰的思路。

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

關於我

• 個人github主頁(點擊進入)
• 個人公衆號(點擊進入)
• 個人掘金主頁(點擊進入)
• 個人簡書主頁(點擊進入)

參考

• w3c最新標準

• HTML_製做滾動字幕_marquee標籤