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

最新推荐文章于 2025-07-07 15:54:26 发布

翻译最新推荐文章于 2025-07-07 15:54:26 发布 · 4.2k 阅读

前端js 专栏收录该内容

39 篇文章

订阅专栏

本文介绍了一种使用原生JavaScript实现的单行文本无缝滚动效果，常见于网站公告栏等场景。通过简单的代码示例展示了如何让文本在水平方向上不断滚动，并在达到边界时复位。

本章节介绍一下如何利用原生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>