JavaScript技巧：实现水平循环滚动的Marquee效果

于 2023-09-24 07:48:04 发布
阅读量585 收藏
点赞数
文章标签： javascript 开发语言 ecmascript js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/TechNovaX/article/details/133229946
版权
js 专栏收录该内容
499 篇文章 ¥59.90 ¥99.00
订阅专栏
本文介绍了如何利用JavaScript实现水平循环滚动的Marquee效果。通过设置HTML结构、CSS样式以及编写JavaScript代码，创建一个包含滚动内容的容器，并使用定时器和CSS动画特性实现平滑且可循环的滚动效果。

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

在网页开发中，经常会遇到需要实现文字或内容水平滚动的需求。本文将介绍一种使用JavaScript实现水平循环滚动（Marquee）效果的技巧。我们将通过编写一段简单的代码来实现这个效果。

首先，我们需要一个容器元素来包含需要滚动的内容。我们可以使用一个div元素，并设置固定的宽度和高度，以及overflow属性为hidden，来隐藏超出容器的内容。接下来，我们在容器内部创建一个包含滚动内容的子元素。

下面是实现Marquee效果的HTML结构：

<div class="marquee-container">
了解本专栏 订阅专栏 解锁全文
js水平自定义滚动，实现拖动效果
weixin_58688577的博客
08-30 752
js水平横向滚动条自定义
Js实现文字水平滚动
xiji666
12-23 998
公司项目中有一个公告栏，写的时候我先想到了用marquee，于是发现了marquee有很多弊端，当文字全部显示完才出现新的文字，这样不是很友好，然后一查发现marquee这个标签已经被W3C标准废弃了，也就是不再支持使用这个标签了，于是我便用js+css去替代这个写法，并且做到类似无缝滚动的效果。直接上代码： html代码 <div id="scroll_div" class="fl...
marquee.js
weixin_34347651的博客
03-07 199
  图片无缝滚动工具类 CreateTime--2018年3月7日17:11:03 Author:Marydon /** * 图片无缝滚动 * @description * 将要滚动的图片复制一份作为它的兄弟节点拼接到其身后， * 通过操作scrollTop和scrollLeft来调节滚动条的距离来实现 */ function Marqu...
marquee 和JS 滚动效果
逸少
11-13 2412
HTML 实现滚动效果 页面的自动滚动效果，可由javascript来实现，但是今天无意中发现了一个html标签 - 可以实现多种滚动效果，无需js控制。 使用marquee标记不仅可以移动文字，也可以移动图片，表格等. 语法：...； 说明：在标记之间添加要进行滚动的内容。 重要属性： 1.滚动方向direction（包括4个值：up、 down、 left和 ri
jQuery模拟Marquee实现无缝滚动效果完整实例
10-21
无缝滚动通常需要设置一个定时器，定时地将内容从容器的末端移动到开头，或者从开头移动到末端，这样就产生了循环滚动的效果。可以通过设置循环动画，利用jQuery的"animate"函数来实现这一点。具体地，使用".animate...
实现水平滚动字幕的循环滚动技巧
**水平滚动字幕循环滚动**，顾名思义，指的是字幕内容在显示屏上水平滚动，并且滚动内容会循环播放的一种显示效果。这种效果可以用于显示广告信息、通知消息、中奖信息等。水平滚动字幕循环滚动可以吸引用户的注意力...
掌握marquee标签实现无缝与间歇滚动效果
通过设置marquee标签的不同属性，我们可以控制滚动的起始位置、速度、方向、是否循环滚动等。例如，通过设置direction属性可以控制滚动方向，用scrollamount属性可以控制滚动速度。当网页加载时，浏览器会将marquee...
JS实现通用文字图片不间断滚动替代Marquee技巧
在本段介绍中，我们探讨一个特别针对网页设计和开发的JavaScript封装类，该封装类用于实现网页中文字和图片的不间断滚动效果。这种效果在以前常常使用HTML的`<marquee>`标签来实现，但随着时间推移，这种方法已逐渐...
js实现marquee标签
03-16
使用js实现了ie的marquee标签滚动功能， 　　使之能兼容FF,ie 并修正了纯中文横向滚动时的bug..
js实现的类marquee水平循环滚动
10-29
marquee （水平）循环滚动的js实现 ,需要的朋友可以参考下。
JS实现无缝循环marquee滚动效果
12-29
无缝循环marquee滚动JS代码实现，兼容IE, FireFox, Chrome，供大家参考，具体内容如下 首先是CSS和HTML如下: #marquee_zxd { border: 1px solid red; white-space: nowrap; overflow: hidden; width: 500px; padding-top: 5px; } #marquee_zxd img { height: 100px; } <!--　横向一定要是span --> <spa
js实现html内容循环滚动
11-03
javascript实现网页动态效果，更好的界面，更好的用户体验。
js水平无缝滚动代码实例详解
Return_KB的博客
01-17 5052
本章节分享一段代码实例，它实现了图片无缝水平滚动效果。这样的功能在实际应用中比较常见，感兴趣的朋友可以做一下参考。代码如下:&lt;!doctype html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;meta name="author" content="http://www.softwhy.com/&
不用marquee标签， js 实现文本在页面上无间断 水平方向滚动
yorcentroll的博客
01-05 1177
场景： 很多人知道这个元素标签marquee， 用来实现内容在窗体中自由自主滚动，就像一个led屏幕上，一直有一行字在滚动。 这个标签确实很方便，可以控制方向，速度等等。 但是，marquee标签却被官方在很早之前就被废弃了。 所以，我们考虑可以自己写一个组件，替代marquee标签。 实现： 先上html代码： <div class="parent"> <div id="scrollText" class="child"></div> .
marquee循环滚动
weixin_33911824的博客
04-16 220
<!--滚动广告开始 --><DIV id=ad style="POSITION: absolute; z-index:99"><DIV style="FONT-SIZE: 9pt; CURSOR: hand;" onclick=hidead(); align=right>关闭×</DIV><A href="#" target=_blank&g...
JS文字水平滚动 > 优化
qq_42954336的博客
08-13 646
代码 &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;title&gt;&lt;/title&gt; &lt;style type="text/css"&gt; ul, li {
信息滚动（marquee+JS实现）
Xiaoming's Blog
01-08 2804
为什么<marquee>标签会被弃用？ 因为它违反了W3C的武学道义，W3C江湖第一原则就是功能性分离即行为与表现的分离，只有恪守这个原则的标签才会被允许参加舞林大会，其他类似于marquee尔等皆是歪门邪道，武功再高也不要，不要！好像就是武功太高啦，哈哈
JavaScript 模拟marquee效果
TRy HArD aT aNY TimE
04-18 193
这段代码主要实现了一个具有渐变滚动效果的marquee，当其获得焦点的时候会出现停顿效果 javascript代码如下: [code="java"] /** *@author anwx An Weixiao *@version $Id$ */ var m_iInterval; var m_Height; var iScroll=0; var SnowMarquee =...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值