原生Js无缝滚动效果的简单实现

最新推荐文章于 2025-05-24 14:56:39 发布

my_coding2015

最新推荐文章于 2025-05-24 14:56:39 发布

阅读量4.3k

点赞数

CC 4.0 BY-SA版权

分类专栏： Js+Html+css 文章标签： web前端开发

本文链接：https://blog.youkuaiyun.com/my_coding2015/article/details/52133364

本文介绍如何用原生JavaScript实现无缝滚动效果，包括鼠标移入停止和移出继续滚动，以及间歇性滚动。在实现过程中遇到了将函数传入setInterval时未定义的问题，探讨了可能的原因。同时提到了marquee标签的过时及其效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前言：

1.仍然是比较简单的内容，从简单开始慢慢加深自己的js水平。

2.无缝滚动，前提条件是子box的高度要大于父box的高度，这样才有必要去滚动，否则直接展示就可以了。

3.增添了鼠标移入停止和移出继续滚动的效果。

4.增加了间歇性无缝滚动效果。

5.在小结部分会总结一些过程中遇到的疑问，还望各位不啬赐教，拜谢。

代码如下：

<span style="font-family: Arial, Helvetica, sans-serif; background-color: rgb(255, 255, 255);"></span><pre name="code" class="html"><!-- 
Time:2016.8.5
Author:Joel

1.html标签<marquee>，可以考察一下在html5标准下使用什么来实现
可以设置滚动区域的宽高
behavior ＝ “alternate”  两端之间来回滚动
behavior ＝ “scroll”  由一端到另一端，重复滚动
behavior ＝ “slide”  由一端到另一端，不重复
direction  滚动的方向（down，up，left，right）
loop  （滚动的次数，loop ＝ －1 表示无限滚动，默认为－1）
scrollamount  设置活动字幕的滚动速度
scrolldelay  设置活动字幕两次滚动之间的延迟时间

2.onmouseover = "this.stop()"

3.onmouseout = "this.start()"

4.父元素设置高度 滚动元素也需要设置高度 而且滚动元素的高度必须大于父元素 这样才能滚动

5.setTimeout(表达式，延迟时间) 仅执行1次
-->
<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>