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

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

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

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

思路：

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

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

判斷文字和容器的長度可以通過offsetWidth來判斷。如果文字長度大于容器長度，則開始滾動。

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

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

function scroll_left(){
    if(textWidth>boxWidth){
     //文字長度大于盒子長度，開始滾動
       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">實現(xiàn)文字的跑馬燈效果，超出容器的長度則開始向左滾動</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(){
       //比較文字與盒子長度的大小
       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){
         //文字長度大于盒子長度，開始滾動
         box.scrollLeft++;
         setTimeout('scroll_left()',1);
       }
     }
  </script>

</body>
</html>

以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: