前端實現(xiàn)文字跑馬燈的三種方式

fanux 發(fā)布于2019-08-23 12:45 / 2649人閱讀

摘要：前言最近寫了一個文字跑馬燈的項目需求，剛開始用寫，能夠完成需求。代碼部分預(yù)覽實現(xiàn)文字跑馬燈小結(jié)的方式能夠完美的滿足子需求點和自需求點。

前言

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

首先，需求分析:

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

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

一、JS實現(xiàn)

思路:

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

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

如果不熟悉offsetWidth，scrollLeft，您可以點擊這里offsetWidth、scrollLeft

效果圖

注釋: 文字抖動現(xiàn)象是因為錄制時間過長，ps制作gif文件只能是500幀以下，通過降低幀率才出現(xiàn)了文字抖動。
代碼部分

預(yù)覽Demo：JS實現(xiàn)文字跑馬燈

小結(jié)

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
  // 開始滾動  觸發(fā)事件
  toScrollLeft()
}

判斷滾動的結(jié)束根據(jù)滾動條到元素左邊的距離和文字的長度判斷，如果滾動條到元素左邊的距離等于文字的長度，則結(jié)束滾動。

function toScrollLeft(){
  //  如果文字長度大于滾動條距離，則遞歸拖動
  if(textWidth > box.scrollLeft){
    box.scrollLeft++
    setTimeout("toScrollLeft()", 18);
  }
  else{
    // 滾動結(jié)束 觸發(fā)事件
  }
}

二、HTML實現(xiàn)

效果圖:

代碼部分:

  1.文字如果超出了寬度自動向左滾動文字如果超出了寬度自動向左滾動。

非常簡潔的代碼~、~

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.

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

所以，根據(jù)咱們IT圈內(nèi)的緊跟文檔標準的原則，對marquee標簽，我們在項目中請盡量不要使用

三、CSS實現(xiàn)

效果圖

代碼部分

預(yù)覽Demo: CSS實現(xiàn)文字跑馬燈

小結(jié)

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

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

同時，也能滿足子需求點2，判斷滾動的結(jié)束。

// 滾動結(jié)束
document.addEventListener("transitionend", function (){
    console.log("end")
}, false)

結(jié)語

回顧需求

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

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

實現(xiàn)方式的優(yōu)劣對比

	js實現(xiàn)跑馬燈效果	html實現(xiàn)跑馬燈效果	css實現(xiàn)跑馬燈效果
需求點1	??	?	??
需求點2	??	?	??
兼容性	??	?	?

如果需要滿足需求，js和css都能夠?qū)崿F(xiàn)。但是考慮到兼容性，css在ios9以下，安卓4.4以下不支持，其他好的解決方案在考慮中。如果你有好的解決方案，歡迎在下方留言與我交流~

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

效果圖

代碼部分

預(yù)覽Demo css無縫滾動動畫

所以，工具本身沒有優(yōu)劣之分，什么時候用什么工具。我們要有清晰的思路。

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

關(guān)于我

我的github主頁(點擊進入)

我的公眾號(點擊進入)

我的掘金主頁(點擊進入)

我的簡書主頁(點擊進入)

參考

w3c最新標準

HTML_制作滾動字幕_marquee標簽

云服務(wù)器 GPU云服務(wù)器服務(wù)器的三種存儲方式阿里云發(fā)送郵件的三種方式云計算的三種服務(wù)模式 asp支持的三種控件

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/98986.html

發(fā)表評論

登陸后可評論

0條評論

fanux

男|高級講師

我要關(guān)注我要私信

TA的文章

2021藍橋杯你值得擁有

閱讀 2676·2021-11-18 10:02
怎么遠程登錄云主機-云主機怎么遠程操作？

閱讀 3447·2021-09-22 15:50
寫在35歲，過去現(xiàn)在和未來

閱讀 2370·2021-09-06 15:02
【靜態(tài)頁面架構(gòu)】CSS之盒子模型

閱讀 3591·2019-08-29 16:34
手機端用rem+scss做適配

閱讀 1754·2019-08-29 13:49
前端面試問題（持續(xù)更新）

閱讀 1285·2019-08-29 13:29
解決ios safari中按鈕圓角問題

閱讀 3650·2019-08-28 18:08
antd源碼解讀（二）Tooltip組件解析

閱讀 2969·2019-08-26 11:52

成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

前端實現(xiàn)文字跑馬燈的三種方式

相關(guān)文章