JavaScript实现文字无缝滚动跑马灯效果

JavaScript文字跑马灯实现思路

本文分享了一段使用JavaScript实现文字跑马灯效果的具体代码示例，供读者参考学习。

实现该效果的核心思路如下：

首先，需要判断文字内容的实际宽度与容器宽度的关系。如果文字长度大于容器长度，则启动滚动动画；若文字较短未溢出，则不进行滚动操作。

其次，通过计算滚动条距离元素左侧的距离来驱动滚动。利用递归方式不断调整位置，直到滚动距离累积至文字总长度时，终止递归过程。

具体判断文字与容器长度是否满足滚动条件时，可以使用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);
   }
}

以下是完整的实现代码：

<!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">实现文字的跑马灯效果，超出容器的长度则开始向左滚动</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>

以上就是本文的全部内容，希望能为读者的学习提供帮助，同时也欢迎大家继续支持本站。