当前位置：首页 > 全部内容 > 正文

JavaScript实现无缝滚动动画：原理与多方向代码详解

作者：流萤

时间：2026-10-24

浏览：298

本文深入解析基于JavaScript的无缝滚动动画实现原理，涵盖向上、向下、向左及向右四种滚动方向。通过克隆节点、控制scrollTop/scrollLeft及处理CSS布局，解决滚动断点问题，并提供完整代码示例与兼容性处理方案。

文章目录

无缝滚动概述与结构基础

无缝滚动技术似乎是互联网广告最主流的展示形式，其普及程度可谓无处不在。相较于早期的闪光字体或浮动广告，这种形式在用户体验上有所提升。鉴于前端开发中此类需求的普遍性，开发者迟早会接触到相关实现。接下来将先展示HTML结构层，随后逐步剖析其核心实现原理。


<dl id="marquee">
 <dt>
 <img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s017.jpg" alt="无缝滚动"/>
 <img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s018.jpg" alt="无缝滚动"/>
 <img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s019.jpg" alt="无缝滚动"/>
 <img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s020.jpg" alt="无缝滚动"/>
 <img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s021.jpg" alt="无缝滚动"/>
 <img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s022.jpg" alt="无缝滚动"/>
 <img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s023.jpg" alt="无缝滚动"/>
 </dt>
 <dd></dd>
</dl>

该结构设计的优势在于相比网络上常见的纯DIV布局，能显著减少id和class的使用，从而简化代码。关于“DIV+CSS”这一说法存在争议，更准确的理解应为“XHTML+CSS”。其核心在于宏观布局上使用块状元素替代table，利用DIV默认样式少的特点进行布局，而table则回归数据展示的本质；在微观样式上，用CSS替代b、big、center等旧式标签，因为CSS具备更强的格式化能力。

向上滚动原理与DOM结构

其实现逻辑与纯CSS相册通过点击锚点切换图片类似，核心在于利用scrollTop属性。具体过程如下：首先将dl元素的overflow设为hidden以隐藏左侧滚动条。随着scrollTop值不断增加，内容向上移动，可视区上方的内容被挤出，效果类似于设置了负的margin-top。当滚动至dd元素时，需关注dt元素。dt元素原本为空，此处克隆了dd中的图片，旨在制造视觉上的连续假象。当dt元素完全被挤出dl可视区时，dl可视区的显示状态与初始状态完全一致。然而，若继续滚动，dd下方无内容，滚动将中断。因此，在dt元素完全移出可视区的瞬间，将dl的scrollTop重置为0，使内容重新从dt元素的图片开始显示，从而实现无缝循环。

关键节点判断与兼容性处理

关键在于如何精准判断“dt元素完全被挤出dl可视区”这一时刻。可以通过获取dt元素的offsetHeight（包含padding和border的高度）或dd元素的offsetTop（dd顶部到dl顶部的距离）来确定。考虑到IE浏览器的兼容性问题，此处选择使用offsetTop。为确保offsetParent计算正确，必须为dl元素设置position:relative。在IE6中，offsetParent直接指向父元素；而在IE7、IE8及标准浏览器中，它指向最近的已定位父级元素，若无则指向body。


#marquee {
 position:relative;
 height:300px;
 width:200px;
 overflow:hidden;
 border:10px solid #369;
}
#marquee img {
 display:block;
}
#marquee dd {
 margin:0px;
 padding:0px;
}


var Marquee = function(id){
 try{document.execCommand("BackgroundImageCache", false, true);}catch(e){};
 var container = document.getElementById(id),
 original = container.getElementsByTagName("dt")[0],
 clone = container.getElementsByTagName("dd")[0],
 speed = arguments[1] || 10;
 clone.innerHTML=original.innerHTML;
 var rolling = function(){
 if(container.scrollTop == clone.offsetTop){ 
 container.scrollTop = 0;
 }else{
 container.scrollTop++;
 }
 }
 var timer = setInterval(rolling,speed)//设置定时器
 container.onmouseover=function() {clearInterval(timer)}//鼠标移到marquee上时，清除定时器，停止滚动
 container.onmouseout=function() {timer=setInterval(rolling,speed)}//鼠标移开时重设定时器
}
window.onload = function(){
 Marquee("marquee");
}

<!doctype html>
<title>javascript无缝滚动 by 司徒正美</title>
<meta charset="utf-8"/>
<meta name="keywords" content="javascript无缝滚动 by 司徒正美" />
<meta name="description" content="javascript无缝滚动 by 司徒正美" />
<style type="text/css">
 h1 {
 font:400 16px/1 "Microsoft YaHei",KaiTi_GB2312,SimSun
 }
 #marquee {
 position:relative;
 height:300px;
 width:200px;
 overflow:hidden;
 border:10px solid #369;
 }
 #marquee img {
 display:block;
 }
 #marquee dd {
 margin:0px;
 padding:0px;
 }
</style>
<script type="text/javascript">
 var Marquee = function(id){
 try{document.execCommand("BackgroundImageCache", false, true);}catch(e){};
 var container = document.getElementById(id),
 original = container.getElementsByTagName("dt")[0],
 clone = container.getElementsByTagName("dd")[0],
 speed = arguments[1] || 10;
 clone.innerHTML=original.innerHTML;
 var rolling = function(){
 if(container.scrollTop == clone.offsetTop){
 container.scrollTop = 0;
 }else{
 container.scrollTop++;
 }
 }
 var timer = setInterval(rolling,speed)//设置定时器
 container.onmouseover=function() {clearInterval(timer)}//鼠标移到marquee上时，清除定时器，停止滚动
 container.onmouseout=function() {timer=setInterval(rolling,speed)}//鼠标移开时重设定时器
 }
 window.onload = function(){
 Marquee("marquee");
 }
</script>
<h1>javascript无缝滚动(向上滚动) by 司徒正美</h1>

<dl id="marquee">
 <dt>
 <img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s017.jpg" alt="javascript无缝滚动 by 司徒正美"/>
 <img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s018.jpg" alt="javascript无缝滚动 by 司徒正美"/>
 <img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s019.jpg" alt="javascript无缝滚动 by 司徒正美"/>
 <img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s020.jpg" alt="javascript无缝滚动 by 司徒正美"/>
 <img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s021.jpg" alt="javascript无缝滚动 by 司徒正美"/>
 <img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s022.jpg" alt="javascript无缝滚动 by 司徒正美"/>
 <img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s023.jpg" alt="javascript无缝滚动 by 司徒正美"/>
 </dt>
 <dd></dd>
</dl>

向下滚动实现逻辑

上述示例演示的是向上滚动逻辑。向下滚动的实现相对简单，只需在初始化时将dl元素的scrollTop设置为dd元素的offsetTop值，随后通过递减scrollTop值即可实现。


<!doctype html>
<title>javascript无缝滚动 by 司徒正美</title>
<meta charset="utf-8"/>
<meta name="keywords" content="javascript无缝滚动 by 司徒正美" />
<meta name="description" content="javascript无缝滚动 by 司徒正美" />
<style type="text/css">
 h1 {
 font:400 16px/1 "Microsoft YaHei",KaiTi_GB2312,SimSun
 }
 #marquee {
 height:300px;
 width:200px;
 overflow:hidden;
 position:relative;
 border:10px solid #F2F1D7;
 }
 #marquee img {
 display:block;
 }
 #marquee dd {
 margin:0px;
 padding:0px;
 }
</style>
<script type="text/javascript">
 var Marquee = function(id){
 try{document.execCommand("BackgroundImageCache", false, true);}catch(e){};
 var container = document.getElementById(id),
 original = container.getElementsByTagName("dt")[0],
 clone = container.getElementsByTagName("dd")[0],
 speed = arguments[1] || 10;
 clone.innerHTML=original.innerHTML;
 container.scrollTop = clone.offsetTop;
 var rolling = function(){
 if(container.scrollTop == 0){
 container.scrollTop = clone.offsetTop;
 }else{
 container.scrollTop--;
 }
 }
 var timer = setInterval(rolling,speed)//设置定时器
 container.onmouseover=function() {clearInterval(timer)}//鼠标移到marquee上时，清除定时器，停止滚动
 container.onmouseout=function() {timer=setInterval(rolling,speed)}//鼠标移开时重设定时器
 }
 window.onload = function(){
 Marquee("marquee");
 }
</script>
<h1>javascript无缝滚动(向下滚动) by 司徒正美</h1>

<dl id="marquee">
 <dt>
 <img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s017.jpg" alt="javascript无缝滚动 by 司徒正美"/>
 <img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s018.jpg" alt="javascript无缝滚动 by 司徒正美"/>
 <img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s019.jpg" alt="javascript无缝滚动 by 司徒正美"/>
 <img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s020.jpg" alt="javascript无缝滚动 by 司徒正美"/>
 <img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s021.jpg" alt="javascript无缝滚动 by 司徒正美"/>
 <img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s022.jpg" alt="javascript无缝滚动 by 司徒正美"/>
 <img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s023.jpg" alt="javascript无缝滚动 by 司徒正美"/>
 </dt>
 <dd></dd>
</dl>

向左滚动布局与CSS技巧

向左滚动的实现相对复杂。首先，需将图片横向排列，包括dt元素内的图片以及克隆到dd元素中的图片，这需要使用浮动布局。此外，还需使dt和dd元素横向排列，因此需对dl元素应用浮动。同时，需将dl元素的宽度设置为一个极大值（如1000%，即浏览器宽度的十倍），以防止换行并确保所有图片一字排开。由于图片浮动时左右存在间隙，仅设置margin和padding为0往往无法完全消除。一种极端但有效的方法是为图片外层包裹a元素。虽然点击链接会跳转，但这能利用a元素作为内联元素的特性，使其向内收缩并吞噬图片间的空隙。最后，为了控制显示范围，需在dl元素外再包裹一个div，并在此处设置overflow、position和width等关键样式。


<div id="marquee">
 <dl>
 <dt>
 <a href="http://www.cnblogs.com/rubylouvre/" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><img src="o_s017.jpg" alt="无缝滚动"</a>
 <a href="http://www.cnblogs.com/rubylouvre/" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><img src="o_s018.jpg" alt="无缝滚动"</a>
 <a href="http://www.cnblogs.com/rubylouvre/" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><img src="o_s019.jpg" alt="无缝滚动"</a>
 <a href="http://www.cnblogs.com/rubylouvre/" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><img src="o_s020.jpg" alt="无缝滚动"</a>
 <a href="http://www.cnblogs.com/rubylouvre/" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><img src="o_s021.jpg" alt="无缝滚动"</a>
 <a href="http://www.cnblogs.com/rubylouvre/" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><img src="o_s022.jpg" alt="无缝滚动"</a>
 <a href="http://www.cnblogs.com/rubylouvre/" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><img src="o_s023.jpg" alt="无缝滚动"</a>
 </dt>
 <dd></dd>
 </dl>
</div>

#marquee {
 position:relative;
 width: 400px;
 overflow:hidden;
 border: 10px solid #B45B3E;
}
#marquee img {
 border:0px;
}
#marquee dl, #marquee dt,#marquee dd,#marquee a {
 float:left;
 margin:0;
 padding:0;
}
#marquee dl{
 width:1000%;
 height:150px;
}

JavaScript代码调整与方向控制

JavaScript代码在此处改动不大，主要将offsetTop替换为offsetLeft，scrollTop替换为scrollLeft。由此可见，熟练掌握CSS布局知识对前端开发至关重要。


var Marquee = function(id){
 try{document.execCommand("BackgroundImageCache", false, true);}catch(e){};
 var container = document.getElementById(id),
 original = container.getElementsByTagName("dt")[0],
 clone = container.getElementsByTagName("dd")[0],
 speed = arguments[1] || 10;
 clone.innerHTML=original.innerHTML;
 var rolling = function(){
 if(container.scrollLeft == clone.offsetLeft){
 container.scrollLeft = 0;
 }else{
 container.scrollLeft++;
 }
 }
 var timer = setInterval(rolling,speed)//设置定时器
 container.onmouseover=function() {clearInterval(timer)}//鼠标移到marquee上时，清除定时器，停止滚动
 container.onmouseout=function() {timer=setInterval(rolling,speed)}//鼠标移开时重设定时器
}

<!doctype html>
<title>javascript无缝滚动 by 司徒正美</title>
<meta charset="utf-8"/>
<meta name="keywords" content="javascript无缝滚动 by 司徒正美" />
<meta name="description" content="javascript无缝滚动 by 司徒正美" />
<base href="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/">
<style type="text/css">
 h1 {
 font:400 16px/1 "Microsoft YaHei",KaiTi_GB2312,SimSun
 }
 #marquee {
 position:relative;
 width: 400px;
 overflow:hidden;
 border: 10px solid #B45B3E;
 }
 #marquee img {
 border:0px;
 }
 #marquee dl, #marquee dt,#marquee dd,#marquee a {
 float:left;
 margin:0;
 padding:0;
 }
 #marquee dl{
 width:1000%;
 height:150px;
 }
</style>
<script type="text/javascript">
 var Marquee = function(id){
 try{document.execCommand("BackgroundImageCache", false, true);}catch(e){};
 var container = document.getElementById(id),
 original = container.getElementsByTagName("dt")[0],
 clone = container.getElementsByTagName("dd")[0],
 speed = arguments[1] || 10;
 clone.innerHTML=original.innerHTML;
 var rolling = function(){
 if(container.scrollLeft == clone.offsetLeft){
 container.scrollLeft = 0;
 }else{
 container.scrollLeft++;
 }
 }
 var timer = setInterval(rolling,speed)//设置定时器
 container.onmouseover=function() {clearInterval(timer)}//鼠标移到marquee上时，清除定时器，停止滚动
 container.onmouseout=function() {timer=setInterval(rolling,speed)}//鼠标移开时重设定时器
 }
 window.onload = function(){
 Marquee("marquee");
 }
</script>
<h1>javascript无缝滚动(向左滚动) by 司徒正美</h1>
<div id="marquee">
 <dl>
 <dt>
 <a href="http://www.cnblogs.com/rubylouvre/"><img src="o_s017.jpg" alt="javascript无缝滚动 by 司徒正美"/></a>
 <a href="http://www.cnblogs.com/rubylouvre/"><img src="o_s018.jpg" alt="javascript无缝滚动 by 司徒正美"/></a>
 <a href="http://www.cnblogs.com/rubylouvre/"><img src="o_s019.jpg" alt="javascript无缝滚动 by 司徒正美"/></a>
 <a href="http://www.cnblogs.com/rubylouvre/"><img src="o_s020.jpg" alt="javascript无缝滚动 by 司徒正美"/></a>
 <a href="http://www.cnblogs.com/rubylouvre/"><img src="o_s021.jpg" alt="javascript无缝滚动 by 司徒正美"/></a>
 <a href="http://www.cnblogs.com/rubylouvre/"><img src="o_s022.jpg" alt="javascript无缝滚动 by 司徒正美"/></a>
 <a href="http://www.cnblogs.com/rubylouvre/"><img src="o_s023.jpg" alt="javascript无缝滚动 by 司徒正美"/></a>
 </dt>
 <dd></dd>
 </dl>
</div>

向右滚动的实现逻辑与向左滚动类似，遵循相同的原理，只需调整相应的参数和方向即可。


<!doctype html>
<title>javascript无缝滚动 by 司徒正美</title>
<meta charset="utf-8"/>
<meta name="keywords" content="javascript无缝滚动 by 司徒正美" />
<meta name="description" content="javascript无缝滚动 by 司徒正美" />
<base href="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/">
<style type="text/css">
 h1 {
 font:400 16px/1 "Microsoft YaHei",KaiTi_GB2312,SimSun
 }
 #marquee {
 position:relative;
 width: 400px;
 overflow:hidden;
 border: 10px solid #8080C0;
 }
 #marquee img {
 border:0px;
 }
 #marquee dl, #marquee dt,#marquee dd,#marquee a {
 float:left;
 margin:0;
 padding:0;
 }
 #marquee dl{
 width:1000%;
 height:150px;
 }
</style>
<script type="text/javascript">
 var Marquee = function(id){
 try{document.execCommand("BackgroundImageCache", false, true);}catch(e){};
 var container = document.getElementById(id),
 original = container.getElementsByTagName("dt")[0],
 clone = container.getElementsByTagName("dd")[0],
 speed = arguments[1] || 10;
 clone.innerHTML=original.innerHTML;
 container.scrollLeft = clone.offsetLeft
 var rolling = function(){
 if(container.scrollLeft == 0){
 container.scrollLeft = clone.offsetLeft;
 }else{
 container.scrollLeft--;
 }
 }
 var timer = setInterval(rolling,speed)//设置定时器
 container.onmouseover=function() {clearInterval(timer)}//鼠标移到marquee上时，清除定时器，停止滚动
 container.onmouseout=function() {timer=setInterval(rolling,speed)}//鼠标移开时重设定时器
 }
 window.onload = function(){
 Marquee("marquee");
 }
</script>
<h1>javascript无缝滚动(向右滚动) by 司徒正美</h1>
<div id="marquee">
 <dl>
 <dt>
 <a href="http://www.cnblogs.com/rubylouvre/"><img src="o_s017.jpg" alt="javascript无缝滚动 by 司徒正美"/></a>
 <a href="http://www.cnblogs.com/rubylouvre/"><img src="o_s018.jpg" alt="javascript无缝滚动 by 司徒正美"/></a>
 <a href="http://www.cnblogs.com/rubylouvre/"><img src="o_s019.jpg" alt="javascript无缝滚动 by 司徒正美"/></a>
 <a href="http://www.cnblogs.com/rubylouvre/"><img src="o_s020.jpg" alt="javascript无缝滚动 by 司徒正美"/></a>
 <a href="http://www.cnblogs.com/rubylouvre/"><img src="o_s021.jpg" alt="javascript无缝滚动 by 司徒正美"/></a>
 <a href="http://www.cnblogs.com/rubylouvre/"><img src="o_s022.jpg" alt="javascript无缝滚动 by 司徒正美"/></a>
 <a href="http://www.cnblogs.com/rubylouvre/"><img src="o_s023.jpg" alt="javascript无缝滚动 by 司徒正美"/></a>
 </dt>
 <dd></dd>
 </dl>
</div>

滚动文字效果应用

此外，还可以实现滚动文字效果。这种效果与Tab标签页类似，其最大优势在于能够在有限的屏幕空间内展示海量信息，提升信息密度。


<!doctype html>
<title>javascript无缝滚动 by 司徒正美</title>
<meta charset="utf-8"/>
<meta name="keywords" content="javascript无缝滚动 by 司徒正美" />
<meta name="description" content="javascript无缝滚动 by 司徒正美" />
<base href="http://www.cnblogs.com/rubylouvre/archive/2009/">
<style type="text/css">
 h1 {
 font:400 16px/1 "Microsoft YaHei",KaiTi_GB2312,SimSun
 }
 #marquee,#marquee li {
 margin:0;
 padding:0;
 list-style:none;
 }
 #marquee {
 position:relative;
 height:100px;
 width:280px;
 overflow:hidden;
 border:10px solid #c0c0c0;
 }
 #marquee a {
 display:block;
 padding:5px;
 text-decoration:none;
 white-space: nowrap;
 color:#000;
 }
 #marquee a:hover{
 background: #efefda;
 color:#3bcdfe
 }
</style>
<script type="text/javascript">
 var Marquee = function(id){
 try{document.execCommand("BackgroundImageCache", false, true);}catch(e){};
 var container = document.getElementById(id),
 original = container.getElementsByTagName("li")[0],
 speed = arguments[1] || 10,
 clone = original.cloneNode(true);
 container.appendChild(clone);
 var rolling = function(){
 if(container.scrollTop == clone.offsetTop){
 container.scrollTop = 0;
 }else{
 container.scrollTop++;
 }
 }
 var timer = setInterval(rolling,speed)//设置定时器
 container.onmouseover=function() {clearInterval(timer)}//鼠标移到marquee上时，清除定时器，停止滚动
 container.onmouseout=function() {timer=setInterval(rolling,speed)}//鼠标移开时重设定时器
 }
 window.onload = function(){
 Marquee("marquee");
 }
</script>
<h1>javascript无缝滚动(向上滚动) by 司徒正美</h1>
<ul id="marquee">
 <li>
 <a href="08/08/1541914.html">一步步教你实现纯CSS的柱形图</a>
 <a href="09/02/1558998.html">javascript十个最常用的自定义函数</a>
 <a href="08/24/1552862.html">javascript鼠标事件总结</a>
 <a href="09/14/1566157.html">一个很简单的淡入淡出相册</a>
 <a href="09/18/1568925.html">纯CSS相册</a>
 <a href="08/13/1544365.html">一步步教你实现表格排序（第一部分）</a>
 </li>
</ul>

至此，关于基于JavaScript的无缝滚动动画实现教程已介绍完毕。如需了解更多JavaScript无缝滚动相关内容，建议搜索本站过往文章或继续浏览后续相关文章，感谢大家的支持！

实用工具推荐

电子包浆

绿化、压缩、噪点和虚拟水印，自由调节做旧程度。

使用 ›
图片压缩

选择画质和输出格式，预览压缩前后的大小。

使用 ›
作者最新文章

JavaScript将图片转换为Base64编码的两种途径

怎么在 Vue 或 React 项目中正确集成 animate.js

JS注册事件：addEventListener基础语法与参数详解

JSP和JS的区别：运行环境与服务端/客户端职责解析

pdf.js 官方下载地址：GitHub Release 获取预编译包

相关文章
热门文章
更多
CSS text-transform与JS修改首字母大写的适用场景区别
JS中constructor属性判断数组存在哪些风险
JS正则替换中$1捕获组引用与字符串重组技巧
全栈开发中JavaScript与Java怎么协作？前后端技术栈配合解析
Node.js后端生成高强度随机字符串的方法
怎么在本地运行JavaScript脚本：Node.js下载安装与环境配置教程
JS正则表达式基础：字面量与RegExp构造函数的区别及常用元字符
JS 解压出现乱码或报错怎么解决？
JavaScript常见SyntaxError语法错误排查与修复方法
JS动态构建复杂嵌套JSON对象的方法