javascript實(shí)現(xiàn)文字跑馬燈效果

更新時(shí)間：2020年06月18日 11:40:45 作者：loving-cat

這篇文章主要為大家詳細(xì)介紹了javascript實(shí)現(xiàn)文字跑馬燈效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

本文實(shí)例為大家分享了js實(shí)現(xiàn)文字跑馬燈效果的具體代碼，供大家參考，具體內(nèi)容如下

思路：

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

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

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

window.onload = function(){
       //比較文字與盒子長(zhǎng)度的大小
       if(boxWidth>textWidth){
        return false;
       }
       content.innerHTML += content.innerHTML;
       document.querySelector('.text').classList.add('padding');
       //刷新textwidth
       textWidth = document.querySelector('.text').offsetWidth;
       scroll_left();
     }

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

function scroll_left(){
    if(textWidth>boxWidth){
     //文字長(zhǎng)度大于盒子長(zhǎng)度，開始滾動(dòng)
       box.scrollLeft++;
      setTimeout('scroll_left()',1);
   }
}

完整代碼如下：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    *{
      margin: auto;
      padding: 0;
    }
    .box{
      margin-top: 150px;
      margin-left: 150px;
      color: red;
      white-space: nowrap;
      width: 200px;
      background: rosybrown;
      overflow: hidden;
    }
    .content p{
      display: inline-block;
    }
    .content p.padding{
      padding-right: 200px;
    }
  </style>
  


</head>
<body>
  <div class="box">
    <div class="content">
      <p class="text">實(shí)現(xiàn)文字的跑馬燈效果，超出容器的長(zhǎng)度則開始向左滾動(dòng)</p>
    </div>
  </div>


  <script>
    
     let box = document.querySelector('.box');
     let content = document.querySelector('.content');
     let text = document.querySelector('.text');

    //文本寬度
    let textWidth = text.offsetWidth;
    //盒子寬度
    let boxWidth = text.offsetWidth;


     window.onload = function(){
       //比較文字與盒子長(zhǎng)度的大小
       if(boxWidth>textWidth){
        return false;
       }
       content.innerHTML += content.innerHTML;
       document.querySelector('.text').classList.add('padding');
       //刷新textwidth
       textWidth = document.querySelector('.text').offsetWidth;
       scroll_left();
     }

     function scroll_left(){
       if(textWidth>boxWidth){
         //文字長(zhǎng)度大于盒子長(zhǎng)度，開始滾動(dòng)
         box.scrollLeft++;
         setTimeout('scroll_left()',1);
       }
     }
  </script>

</body>
</html>

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: