javascript实现文字跑马灯效果

一、实现思路：

1.先利用HTML搭建好文字容器和跑马灯容器结构；

2.利用CSS对文字容器进行相应的样式设置，并将跑马灯容器设置为具有固定宽度和溢出隐藏，再将文字容器放置在跑马灯容器中；

3.利用JavaScript开发跑马灯功能，在JavaScript中，通过定时器和相关的DOM操作，实现文字容器在跑马灯容器中持续向左移动的效果。

二、示例代码：

示例1：

<!-- HTML结构 -->
<div class="marquee-box">
  <div class="text-banner">
    <span class="text-item">第一条消息</span> 
    <span class="text-item">第二条消息</span> 
    <span class="text-item">第三条消息</span> 
    <span class="text-item">第四条消息</span> 
  </div>
</div>

/* CSS样式 */
.marquee-box {
  width: 300px;
  height: 30px;
  overflow: hidden;
  border: 1px solid #ddd;
}

.text-banner {
  white-space: nowrap;
  position: relative;
  z-index: 1;
  overflow: hidden;
}

.text-item {
  display: inline-block;
  padding: 0 10px;
}

/* JavaScript实现 */
//取出容器和文本元素
const marqueeBox = document.querySelector('.marquee-box');
const textBanner = document.querySelector('.text-banner');
const textItem = document.querySelectorAll('.text-item');

//定义移动位置
let times = 0;

//克隆文本元素
for(let i = 0; i < textItem.length; i++){
  const cloneItem = textItem[i].cloneNode(true);
  textBanner.appendChild(cloneItem);
}

//开启定时器
const marquee = setInterval(function(){
  times += 1;
  textBanner.style.left = -times + 'px';
  if(times >= textBanner.offsetWidth){
    times = 0;
  }
}, 20);

//鼠标悬停时清除定时器
marqueeBox.addEventListener('mouseover', function(){
  clearInterval(marquee);
});

//鼠标移开时开启定时器
marqueeBox.addEventListener('mouseout', function(){
  marquee = setInterval(function(){
    times += 1;
    textBanner.style.left = -times + 'px';
    if(times >= textBanner.offsetWidth){
      times = 0;
    }
  }, 20);
});

示例2：

<!-- HTML结构 -->
<div class="marquee-box">
  <div class="text-banner">
    <ul class="text-list">
      <li class="text-item">第一条消息</li>
      <li class="text-item">第二条消息</li>
      <li class="text-item">第三条消息</li>
      <li class="text-item">第四条消息</li>
    </ul>
  </div>
</div>

/* CSS样式 */
.marquee-box {
  width: 300px;
  height: 30px;
  overflow: hidden;
  border: 1px solid #ddd;
}

.text-banner {
  white-space: nowrap;
  position: relative;
  z-index: 1;
  overflow: hidden;
}

.text-list {
  display: inline-block;
  margin: 0;
  padding: 0;
}

.text-item {
  display: inline-block;
  padding: 0 10px;
}

/* JavaScript实现 */
//取出容器和文本元素
const marqueeBox = document.querySelector('.marquee-box');
const textBanner = document.querySelector('.text-banner');
const textList = document.querySelector('.text-list');
const textItem = document.querySelectorAll('.text-item');

//定义移动位置
let times = 0;

//克隆文本元素并拼接
for(let i = 0; i < textItem.length; i++){
  const cloneItem = textItem[i].cloneNode(true);
  textList.appendChild(cloneItem);
}

textBanner.appendChild(textList);

//开启定时器
const marquee = setInterval(function(){
  times += 1;
  textBanner.style.left = -times + 'px';
  if(times >= textList.offsetWidth){
    times = 0;
  }
}, 20);

//鼠标悬停时清除定时器
marqueeBox.addEventListener('mouseover', function(){
  clearInterval(marquee);
});

//鼠标移开时开启定时器
marqueeBox.addEventListener('mouseout', function(){
  marquee = setInterval(function(){
    times += 1;
    textBanner.style.left = -times + 'px';
    if(times >= textList.offsetWidth){
      times = 0;
    }
  }, 20);
});

以上是JavaScript实现文字跑马灯效果的详细攻略，其中示例1使用的是标签实现，示例2使用的是

和
• 标签实现，我们可以根据实际需求来灵活选择实现方式。