如何實現文字跑馬燈

這篇文章主要介紹了如何實現文字跑馬燈，具有一定借鑒價值，需要的朋友可以參考下。希望大家閱讀完這篇文章后大有收獲。下面讓小編帶著大家一起了解一下。

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

首先，需求分析:

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

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

一、JS實現

思路:

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

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

效果圖

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

代碼部分

HTML：

<div class="box">
    <div class="content">
        <p class="text">1.文字如果超出了寬度自動向左滾動文字如果超出了寬度自動向左滾動。</p>
    </div>
</div>

CSS：

*{
  margin:0;
  padding:0;
}
.box{
  margin-left: 200px;
  margin-top: 100px;
  color: #FFF;
  white-space: nowrap;
  overflow: hidden;
  width: 300px;
  background: #000;
}
.content p{
  display:inline-block;
}
.content p.padding{
  padding-right: 300px;
}

JS：

let [box, content, text] = [
  document.querySelector('.box'),
  document.querySelector('.content'),
  document.querySelector('.text')
]
let [textWidth, boxWidth] = [
  text.offsetWidth,
  box.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{
    // setTimeout("fun2()",2000);
  }
}

小結

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

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

效果圖

代碼部分

HTML：

<div class="wrap">
  <div class="cont">
    <p class="txt">1.文字如果超出了寬度自動向左滾動文字如果超出了寬度自動向左滾動。</p>
    <p class="txt">1.文字如果超出了寬度自動向左滾動文字如果超出了寬度自動向左滾動。</p>        
  </div>
</div>

CSS：

*{
  padding: 0; 
  margin: 0; 
  box-sizing: border-box;
}
.wrap{ 
  margin:10% auto; 
  background: #ddd; 
  font-size: 0; 
  /* 固寬，溢出隱藏 */
  width: 300px; 
  height: 40px; 
  overflow: hidden;
  white-space: nowrap;
  /* 相對定位 */
  position: relative;
}
.wrap  .cont{
  position: absolute; 
  top: 0;
  left: 0; 
  height: 100%;
  /* 關鍵 */
  width: 200%;
  transition:left 10s linear;
}
.wrap .txt{ 
  display: inline-block; 
  font-size: 18px;
  line-height: 30px; 
  margin-top: 5px; 
  color: #fff;
  background: #000;
}

JS：

var cont = document.querySelector('.cont')
var wrap = document.querySelector('.wrap')
var text = document.querySelector('.txt')
var wrapWidth = wrap.offsetWidth
var textWidth = text.offsetWidth
window.onload=function checkScrollLeft(){
  // 判斷文字長度是否大于盒子長度  開始滾動
  if(textWidth > wrapWidth) {
    text.style.paddingRight = '300px'
    cont.style.left = "-870px"
  }
  // 滾動結束
  document.addEventListener("transitionend", function (){
    console.log("end")
  }, false)
}

小結

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

效果圖

代碼部分

HTML：

<div class="wrap">
  <div class="cont">
    <p class="txt">1.文字如果超出了寬度自動向左滾動文字如果超出了寬度自動向左滾動。</p>
    <p class="txt">2.文字如果超出了寬度自動向左滾動文字如果超出了寬度自動向左滾動。</p>
  </div>
</div>

CSS：

*{
  padding: 0; 
  margin: 0; 
  box-sizing: border-box;
}
.wrap{ 
  position: relative; 
  width: 40%; 
  height: 40px; 
  margin:10% auto; 
  background: #ddd; 
  font-size: 0; 
  overflow: hidden;
}
.wrap  .cont{
  position: absolute; 
  top: 0; 
  left: 0;
  /* 寬度 大于容器的兩倍即可 */
  width: 200%; 
  -webkit-animation:5s move infinite linear;
}
.wrap .txt{ 
  font-size: 18px; 
  color: #fff;
  display: inline-block; 
  /* 寬度 等于容器的寬度 */
  width: 50%; 
  height: 30px; 
  border-left:1px solid #fff; 
  line-height: 30px; 
  text-align: center; 
  margin-top: 5px; 
  background: #000;
}
.wrap:hover .cont{ 
  -webkit-animation-play-state:paused;
}

@-webkit-keyframes move{
  /* 原理 left值的變化 移動一個容器的寬度 */
  0%{
    left: 0;
  }
  100%{
    left: -100%;
  }
}

感謝你能夠認真閱讀完這篇文章，希望小編分享如何實現文字跑馬燈內容對大家有幫助，同時也希望大家多多支持億速云，關注億速云行業資訊頻道，遇到問題就找億速云，詳細的解決方法等著你來學習!