js实现的单行文本不间断无缝滚动效果（荧光屏文字滚动效果）

关注

翻译最新推荐文章于 2026-03-15 00:47:39 发布 4.2k 阅读 AI 写同款· GEO 优化 ›

原生js实现文字无缝滚动，速度可自行定义前端时间工作中遇到一个文字无缝滚动的需求，于是自己研究了很久，写了一个小的demo，可以直接拿走用。适用场景很广泛，如有需求，可来这里拿代码。一、html代码如下：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>文字无缝滚动&l 阅读详情

本章节介绍一下如何利用原生javascript实现但行文本的不简单无缝滚动效果。

这种效果在大量的网站都有使用，站点的公告或者其他功能一般会采用这种形式，下面就通过代码实例简单介绍一下。

代码如下:

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31 <!DOCTYPE html> 
<html> 
<head> 
<meta charset=" utf-8"> 
<title>荧光屏文字
 滚动效果</title> 
<style type="text/css">
#scrollobj{
  white-space:nowrap;
  overflow:hidden;
  width:200px;
  margin:50px;
}
</style>
<script type="text/javascript">
function scroll(obj){
  var tmp=(obj.scrollLeft)++;
  if(obj.scrollLeft==tmp){
    obj.innerHTML += obj.innerHTML;
  }
  if(obj.scrollLeft>=obj.firstChild.offsetWidth){
    obj.scrollLeft=0;
  }
}
setInterval("scroll(document.getElementById('scrollobj'))",20);
</script>
</head>
<body>
<div id="scrollobj">欢迎您，只有努力奋斗才会有美好的未来。</div>
</body>
</html>