實現文字跑馬燈的三種方式介紹（程式碼實例）

這篇文章帶給大家的內容是關於實現文字跑馬燈的三種方式介紹（程式碼實例），有一定的參考價值，有需要的朋友可以參考一下，希望對你有幫助。

最近寫了一個文字跑馬燈的專案需求，剛開始用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>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.已經過時，請不要再使用。儘管一些瀏覽器仍然支援它，但它不是必須的。此外，使用這個元素基本上是你可以對你的用戶做最糟糕的事情之一，所以請不要這樣做。

所以，根據咱們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實作跑馬燈效果html實作跑馬燈效果css實作跑馬燈效果需求點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%;
  }
}

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

以上是實現文字跑馬燈的三種方式介紹（程式碼實例）的詳細內容。更多資訊請關注PHP中文網其他相關文章！