js 滚动 marquee
<marquee> 是 HTML 中的一个标签，用于创建滚动文本或图像的效果。尽管它在早期的网页设计中被广泛使用，但由于其不可访问性和对搜索引擎优化（SEO）的不利影响，现代网页设计中已经不推荐使用 <marquee> 标签。
基础概念
<marquee> 标签允许开发者指定文本或图像在页面上的滚动方式，包括滚动方向、速度和行为。
优势
- 简单易用，只需几行代码即可实现滚动效果。
- 兼容性好，几乎所有浏览器都支持。
类型
direction: 滚动方向，可以是left、right、up或down。behavior: 滚动行为，可以是scroll（连续滚动）、slide（滚动一次后停止）或alternate（来回滚动）。scrollamount: 滚动速度，数值越大，速度越快。scrolldelay: 滚动延迟，数值越大，延迟越长。
应用场景
- 新闻网站的滚动新闻栏。
- 广告横幅的滚动展示。
- 网页底部的版权信息滚动显示。
示例代码
<marquee behavior="scroll" direction="left" scrollamount="5">
这是一个滚动的文本示例。
</marquee>遇到的问题及解决方法
问题：滚动效果不流畅
原因：可能是由于页面加载缓慢或者浏览器性能问题导致的。 解决方法：
- 减少页面上的其他复杂元素，优化页面加载速度。
- 使用 CSS 和 JavaScript 来实现更流畅的滚动效果。
示例代码（使用 CSS 和 JavaScript 实现滚动效果）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Custom Marquee</title>
<style>
.marquee {
width: 100%;
overflow: hidden;
white-space: nowrap;
box-sizing: border-box;
}
.marquee span {
display: inline-block;
padding-left: 100%;
animation: marquee 15s linear infinite;
}
@keyframes marquee {
0% { transform: translateX(0); }
100% { transform: translateX(-100%); }
}
</style>
</head>
<body>
<div class="marquee">
<span>这是一个使用 CSS 和 JavaScript 实现的滚动文本示例。</span>
</div>
</body>
</html>注意事项
- 尽量避免使用
<marquee>标签，因为它不是 W3C 标准的一部分，并且可能会影响网页的可访问性。 - 使用现代的前端技术（如 CSS 动画和 JavaScript）来实现类似的效果，这样可以更好地控制滚动行为，并且更符合现代网页设计的标准。
通过上述方法，你可以实现更加灵活和可控的滚动效果，同时保持网页的良好性能和可访问性。
相关·内容
$('.marquee').marquee({ duration: 5000, gap: 10, background:
浏览 0提问于2018-09-21得票数 2
2回答
我正在使用下面的js插件来做我的文本滚动：$('.marquee').marquee();$(window).load(function() { $('.marquee').marquee例如：
receivedCom = func
浏览 0提问于2016-04-18得票数 2
当一个字幕离开屏幕时，在短时间间隔后，它从另一边进入。有什么方法可以减少这段时间吗？
浏览 0提问于2010-11-20得票数 42
1回答
我有一个从右到左滚动文本的函数。我想加快滚动速度，我试着修改1/100，但是没有什么改变。非常感谢。 var marquee = $('div.marquee'); marquee.each,1/100));}); position:fix
浏览 0提问于2018-10-29得票数 1
回答已采纳
1回答
我有一个div，其中包含了我正在使用jquery水平滚动页面的文本。滚动文本div的内容从mysql数据库中提取，并通过ajax每2分钟更新一次。您可以通过下面的url (查看页面底部的黑条)查看该问题的演示：index.php <imgthe pages load faster -->
<script src="https:/
浏览 5提问于2020-10-01得票数 1
回答已采纳
1回答
在一般消息期间的背景中，检查是否有任何新的滚动内容并加载它。
$this.wrapInner('<div class="js-marquee"></div>');
浏览 1提问于2013-11-02得票数 0
回答已采纳
当我使用“向上”的方向时，我注意到每次第一项向上滚动时，滚动至少会暂停1-2秒，并且在随后的循环中发生。我在IE、Firefox和chrome上尝试过这个，行为也是一样的。这是我的样本html。 </style>
<script type="text/javascript" src="js
浏览 0提问于2014-11-13得票数 0
回答已采纳
3回答
但问题是在那个页面上，我在marquee标签中动态添加了一些数据。因此，当新数据添加到选取框标签中时，选取框标签不会滚动添加到其中的所有文本。注意:它只滚动在页面加载时添加的内容，而不滚动后来添加的其他内容
jquery中有没有选取框标签初始化？我尝试了许多选项来设置选框的宽度等，但没有成功。
浏览 0提问于2017-04-05得票数 0
我想让我的大屏幕从上到下滚动，而不是从右到左。jQuery(document).ready(function($) { var window_width = window.innerWidth', function() {
$(this).detach().appendTo('#marquee ul').
浏览 2提问于2017-02-08得票数 2
2回答
我想在我的应用程序水平滚动。有多个例子，但我发现一个符合我的需要。但是当我尝试的时候，它就不能正常工作了。请看一看，告诉我问题是什么：<html><style> white-space:no-wrap;} white-space:nowrap;
display:i
浏览 3提问于2016-07-22得票数 1
回答已采纳
我正在尝试输出一系列由换行符分隔的滚动文本消息。我的代码如下所示：//set the marquee parameters
function init() { down_marquee.start(
浏览 2提问于2013-02-12得票数 0
我有一些包含滚动html字幕的wordpress页面。加载页面时，将使用ajax调用从sql db获取内容，然后填充字幕。一切正常，但是当您导航到页面时，选框将到达顶部，然后重新开始。wordpress html：<s
浏览 1提问于2013-02-09得票数 0
回答已采纳
1回答
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript" src="//cdn.jsdelivr.net/jquery
浏览 2提问于2021-01-14得票数 0
0回答
我需要滚动表格中的多行文本，一个接一个。当到达最后一行时，第一行应该再次滚动，依此类推(更好地理解，请参阅小提琴)到目前为止，我已经实现了表格(参见此)，但我遇到了一个相当奇怪的问题:在第一轮中，一切正常，但当我到达最后一行时，然后设置第一行滚动，这一行的滚动速度是第一行的两倍。如何让第一行以正常速度滚动？border: 1px solid purple;<script src="https://ajax.googleapis.com/aja
浏览 11提问于2017-01-04得票数 0
回答已采纳
我已经在我的php网站上实现了jquery滚动文本。请参阅我的代码 $(document).ready(function() {
$(&#
浏览 0提问于2012-06-26得票数 0
回答已采纳
我使用了一个<marquee>标签来继续水平移动图像。假设我有5张图片，它移动得很好，但在完成最后一张图片的移动后，从第一个image.How开始滚动有一个很大的差距，我能处理这个吗？我的代码是这样的： <img src="images/a.jpg"> <images/a
浏览 3提问于2012-09-06得票数 4
2回答
目前，我使用纯CSS3动画从右向左滚动文本的大屏幕样式。HTML： <span> position: absolute; display: inline-block;
animation: marquee</
浏览 0提问于2018-08-05得票数 4
回答已采纳
我正在使用marquee.js jQuery插件在文本滚动条中呈现一个列表，但我要做的是在单击按钮时改变滚动文本的方向，而不改变文本的当前位置。left-scroll').on('click', function() {})
$('.scrollermarquee').marquee: rgb(202, 255, 195);<script src
浏览 2提问于2019-09-24得票数 0
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
腾讯会议
云直播活动推荐
腾讯云开发者
