如何實(shí)現(xiàn)文字跑馬燈

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

目前創(chuàng)新互聯(lián)建站已為超過千家的企業(yè)提供了網(wǎng)站建設(shè)、域名、網(wǎng)站空間、成都網(wǎng)站托管、企業(yè)網(wǎng)站設(shè)計(jì)、吉木乃網(wǎng)站維護(hù)等服務(wù)，公司將堅(jiān)持客戶導(dǎo)向、應(yīng)用為本的策略，正道將秉承"和諧、參與、激情"的文化，與客戶和合作伙伴齊心協(xié)力一起成長(zhǎng)，共同發(fā)展。

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

首先，需求分析:

需求點(diǎn)1.判斷文字的長(zhǎng)度和容器的長(zhǎng)度，如果文字長(zhǎng)度大于容器長(zhǎng)度則開始滾動(dòng)，否則不滾動(dòng)；

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

一、JS實(shí)現(xiàn)

思路:

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

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

效果圖

注釋: 文字抖動(dòng)現(xiàn)象是因?yàn)殇浿茣r(shí)間過長(zhǎng)，ps制作gif文件只能是500幀以下，通過降低幀率才出現(xiàn)了文字抖動(dòng)。

代碼部分

HTML：

<div class="box">
    <div class="content">
        <p class="text">1.文字如果超出了寬度自動(dòng)向左滾動(dòng)文字如果超出了寬度自動(dòng)向左滾動(dòng)。</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(){
  // 判斷文字長(zhǎng)度是否大于盒子長(zhǎng)度
  if(boxWidth > textWidth){ return false}
  content.innerHTML += content.innerHTML
  document.querySelector('.text').classList.add('padding')
  // 更新
  textWidth = document.querySelector('.text').offsetWidth
  toScrollLeft()
}
function toScrollLeft(){
  //  如果文字長(zhǎng)度大于滾動(dòng)條距離，則遞歸拖動(dòng)
  if(textWidth > box.scrollLeft){
    box.scrollLeft++
    setTimeout('toScrollLeft()', 18);
  }
  else{
    // setTimeout("fun2()",2000);
  }
}

小結(jié)

js的方式能夠完美的滿足子需求點(diǎn)1和自需求點(diǎn)2。

判斷文字和容器的長(zhǎng)度可以通過offsetWidth來(lái)判斷。如果文字長(zhǎng)度大于容器長(zhǎng)度，則開始滾動(dòng)。

window.onload=function checkScrollLeft(){
  // 判斷文字長(zhǎng)度是否大于盒子長(zhǎng)度
  if(boxWidth >= textWidth){ return false}
  content.innerHTML += content.innerHTML
  document.querySelector('.text').classList.add('padding')
  // 更新
  textWidth = document.querySelector('.text').offsetWidth
  // 開始滾動(dòng)  觸發(fā)事件
  toScrollLeft()
}

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

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

二、HTML實(shí)現(xiàn)

效果圖:

代碼部分:

  <marquee behavior="behavior" width="200" loop="2">1.文字如果超出了寬度自動(dòng)向左滾動(dòng)文字如果超出了寬度自動(dòng)向左滾動(dòng)。</marquee>

非常簡(jiǎn)潔的代碼~、~

marquee的API

雖然marquee標(biāo)簽的api十分豐富，但是該標(biāo)簽在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)過時(shí)，請(qǐng)不要再使用。盡管一些瀏覽器仍然支持它，但它不是必須的。此外，使用這個(gè)元素基本上是你可以對(duì)你的用戶做最糟糕的事情之一，所以請(qǐng)不要這樣做。

所以，根據(jù)咱們IT圈內(nèi)的緊跟文檔標(biāo)準(zhǔn)的原則，對(duì)marquee標(biāo)簽，我們?cè)陧?xiàng)目中請(qǐng)盡量不要使用

三、CSS實(shí)現(xiàn)

效果圖

代碼部分

HTML：

<div class="wrap">
  <div class="cont">
    <p class="txt">1.文字如果超出了寬度自動(dòng)向左滾動(dòng)文字如果超出了寬度自動(dòng)向左滾動(dòng)。</p>
    <p class="txt">1.文字如果超出了寬度自動(dòng)向左滾動(dòng)文字如果超出了寬度自動(dòng)向左滾動(dòng)。</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;
  /* 相對(duì)定位 */
  position: relative;
}
.wrap  .cont{
  position: absolute; 
  top: 0;
  left: 0; 
  height: 100%;
  /* 關(guān)鍵 */
  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(){
  // 判斷文字長(zhǎng)度是否大于盒子長(zhǎng)度  開始滾動(dòng)
  if(textWidth > wrapWidth) {
    text.style.paddingRight = '300px'
    cont.style.left = "-870px"
  }
  // 滾動(dòng)結(jié)束
  document.addEventListener("transitionend", function (){
    console.log("end")
  }, false)
}

小結(jié)

CSS能滿足子需求點(diǎn)1，能夠判斷什么時(shí)候開始滾動(dòng)。

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

同時(shí)，也能滿足子需求點(diǎn)2，判斷滾動(dòng)的結(jié)束。

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

結(jié)語(yǔ)

回顧需求

需求點(diǎn)1.判斷文字的長(zhǎng)度和容器的長(zhǎng)度，如果文字長(zhǎng)度大于容器長(zhǎng)度則開始滾動(dòng)，否則不滾動(dòng)；

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

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

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

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

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

效果圖

代碼部分

HTML：

<div class="wrap">
  <div class="cont">
    <p class="txt">1.文字如果超出了寬度自動(dòng)向左滾動(dòng)文字如果超出了寬度自動(dòng)向左滾動(dòng)。</p>
    <p class="txt">2.文字如果超出了寬度自動(dòng)向左滾動(dòng)文字如果超出了寬度自動(dòng)向左滾動(dòng)。</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值的變化 移動(dòng)一個(gè)容器的寬度 */
  0%{
    left: 0;
  }
  100%{
    left: -100%;
  }
}

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享如何實(shí)現(xiàn)文字跑馬燈內(nèi)容對(duì)大家有幫助，同時(shí)也希望大家多多支持創(chuàng)新互聯(lián)，關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，遇到問題就找創(chuàng)新互聯(lián)，詳細(xì)的解決方法等著你來(lái)學(xué)習(xí)!

當(dāng)前題目：如何實(shí)現(xiàn)文字跑馬燈
網(wǎng)頁(yè)路徑：http://bm7419.com/article16/psdjgg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供手機(jī)網(wǎng)站建設(shè)、搜索引擎優(yōu)化、虛擬主機(jī)、用戶體驗(yàn)、網(wǎng)站營(yíng)銷、小程序開發(fā)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)