js字幕连续滚动代码

要实现JavaScript中的字幕连续滚动效果，我们可以使用HTML、CSS和JavaScript来完成。以下是一个简单的示例，展示了如何创建一个连续滚动的字幕效果。

基础概念

HTML: 用于结构化内容。
CSS: 用于样式设计。
JavaScript: 用于添加交互性和动态效果。

示例代码

HTML部分

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Continuous Scrolling Marquee</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="marquee">
  <span>This is a continuous scrolling marquee example. </span>
</div>
<script src="script.js"></script>
</body>
</html>

CSS部分（styles.css）

body {
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-color: #f0f0f0;
}

.marquee {
  width: 100%;
  overflow: hidden;
  white-space: nowrap;
  position: relative;
}

.marquee span {
  display: inline-block;
  padding-left: 100%;
  animation: marquee 15s linear infinite;
}

@keyframes marquee {
  0% { transform: translateX(0); }
  100% { transform: translateX(-100%); }
}

JavaScript部分（script.js）

// 如果需要动态添加或控制滚动内容，可以使用JavaScript
document.addEventListener('DOMContentLoaded', function() {
  const marquee = document.querySelector('.marquee span');
  // 可以在这里修改marquee的内容或者动画时间等
});

优势

简单易实现: 使用基本的HTML、CSS和JavaScript即可完成。
灵活性高: 可以轻松地调整滚动速度、方向和内容。
兼容性好: 这种方法在大多数现代浏览器中都能很好地工作。

应用场景

网站公告: 用于显示重要信息或更新通知。
新闻滚动条: 在新闻网站中显示最新新闻。
广告宣传: 在页面顶部或底部循环播放广告信息。

可能遇到的问题及解决方法

滚动速度过快或过慢: 调整CSS中的animation-duration属性来改变滚动速度。
内容显示不全: 确保.marquee容器的宽度足够，或者调整内容的长度。
浏览器兼容性问题: 使用transform属性通常有很好的跨浏览器支持，但如果遇到问题，可以考虑添加浏览器前缀或使用polyfills。

通过以上代码和解释，你应该能够实现一个简单的连续滚动字幕效果，并根据需要进行调整和优化。

页面内容是否对你有帮助？

有帮助

没帮助

将选框滚动设置为默认起始位置

、、、、

我有一个html的连续图像滚动(字幕)。我想创建一个字幕，当鼠标悬停事件激活时应该停止，图像应该设置到它的开始位置。在鼠标移出时，字幕应该再次开始滚动。我该如何创建它？

浏览 1提问于2013-08-26得票数 0

1回答

使horizontalscrollview自动滚动

、、

现在，我想滚动其中的所有文本视图，以便显示所有多个文本视图。我怎样才能做到这一点？提前谢谢。

浏览 3提问于2013-12-16得票数 0

1回答

如何在Android中拖拽图片视图结束时自动滚动

所以我有两个水平滚动视图，我把一个图像从一个滚动视图移到另一个。我想让第二个滚动视图在拖动的图像到达horizontalscrollview的任意一端时自动滚动。类似于音乐应用中的封面艺术。我所做的就是将一个拖动监听器附加到第二个滚动视图中，每当event.getX()值超过某个阈值时，我就会调用hsv2.平滑ScrollBy( value，0)。但问题是它只滚动一次。我希望滚动是流畅和连续的。

浏览 2提问于2015-04-10得票数 0

3回答

html格式的选取框

、

我想要一遍又一遍的“连续字幕文本”...背靠背。我不想让文本在下一个开始前完全滚动完...我希望相同的文本开始滚动并继续...

浏览 2提问于2009-03-02得票数 0

3回答

uiimageview iPhone中的字幕效果

、、

如何在UIImage中实现字幕效果动画。请帮帮忙

浏览 6提问于2012-09-27得票数 3

回答已采纳

4回答

android中的字幕

、

在我的android应用程序中，我需要连续滚动字幕文本。在我的Xml中，我有这样的代码： android:id="@+id/widget28" android，我有：tv.setSelected(true); 现在我的问题是，这段代码

浏览 0提问于2010-08-19得票数 1

2回答

HorizontalScrollView，自动滚动以动画结尾

、、

我有一个horizontalScrollView，当我加载视图时，我需要做一个自动滚动来结束动画。run() { }它工作得很好，但是，主要的问题是滚动的动画太快了，我需要实现一个较慢的滚动。

浏览 0提问于2011-09-19得票数 7

回答已采纳

1回答

属性向左向右滚动文本。

、、、、

marquee标签中允许我连续滚动字幕内容的属性是什么？如果我有5个项目作为它的内容，我想为所有5个项目等分空间，也为一个卷轴的第5个和下一个卷轴的第一个之间的空间。因为通常情况下，字幕会在开始下一次滚动之前完成所有项目，但在我的例子中，最后一项和第一项的间隔比字幕内容中出现的每一项都要多。

浏览 0提问于2012-08-22得票数 3

回答已采纳

1回答

在android中滚动webview片尾文字

、、

它将是垂直滚动的线条。这是一个带有图片的html页面，所以我只能使用webview。滚动将自动执行，并且不允许用户交互。就像电影/连续剧的字幕一样，从下到上。我已经在资产文件夹中添加了html页面。

浏览 0提问于2014-05-19得票数 0

2回答

如何将图片放入我的滚动文本js

、、、

我正在使用下面的js插件来做我的文本滚动：$('.marquee').marquee();$(window).load(function() { $('.marquee').marquee(); }); 此函数将在网页加载后加载字幕但是如果我只在收到命令后才加载字幕会怎么样呢？

浏览 0提问于2016-04-18得票数 2

1回答

如何使用量角器测试页面上的动态元素？

、

我们有一个可以显示字幕的视频播放器。每个副标题都在一个div中。当播放器播放时，我们的代码将当前字幕的类设置为"currentSubtitle“，这样我们就可以突出显示字幕。此外，我们还有一些代码可以将当前字幕的div滚动到其中。如何创建测试字幕滚动是否正常工作的测试？

浏览 1提问于2017-04-20得票数 0

2回答

带有多条消息的连续滚动滚动条/字幕-需要JS插件吗？

、、、、

我正在尝试实现的一个很好的例子是上的滚动条效果另外，我猜这在桌面上会有问题，因为你需要更多的重复消息。现在，如果我可以连续显示一条消息，那就太好了。所以基本上我想让文本在屏幕上连续滚动，并在每一项之间设置间距。因此，如果空间允许，您可以同时看到多条消息，这与老式的marquee标签不同。

浏览 2提问于2021-06-13得票数 1

1回答

字幕开始和停止

、、、、

我想有一个向左滚动的图片字幕，当你点击它们时，它们会停止，当你再次点击它们时，它们会继续向左滚动。我知道字幕代码，但你如何在Java或jQuery中编写该函数呢？

浏览 2提问于2015-03-24得票数 0

1回答

AutoIT从父窗口获取子窗口

到目前为止，我的代码如下：WinActivate($browserHandl, "") $popUpHandl = WinWait

浏览 4提问于2015-01-29得票数 0

2回答

字幕滚动不流畅，需要100%流畅滚动字幕

我使用的是从右边到左边的字幕滚动。下面的代码运行良好。但它的滚动并不流畅。内容"Hover on me stop“闪烁或闪烁。我需要一个100%平滑的滚动下面的字幕。请帮帮我。

浏览 1提问于2013-08-24得票数 2

4回答

使用字幕标签进行连续滚动的滚动图像

、

假设我有5张图片，它移动得很好，但在完成最后一张图片的移动后，从第一个image.How开始滚动有一个很大的差距，我能处理这个吗？我的代码是这样的： <img src="images/a.jpg"> <

浏览 3提问于2012-09-06得票数 4

2回答

仅当有溢出时才在div中使用选取框？

、、、、

我只想在文本溢出时滚动div标签中的文本(字幕)。我工作的页面在这里：。"Title“、"Artist”和"Up Next“滚动字段都只需要在出现溢出时滚动。有什么想法吗？

浏览 1提问于2011-06-01得票数 1

回答已采纳

1回答

使用jquery1.3.2插件的选框的javascript代码

、

嘿，伙计们，我有这样的情况，我必须显示水平滚动文本，方向应该是从左边开始，而不是使用字幕标记.And，它应该只使用jquery1.3.2.min.js插件。请帮帮我。提前感谢:)

浏览 1提问于2013-02-07得票数 0

1回答

Android:如何查找Marquee textview滚动时长

、、、

在第一次完整滚动之后，我想要更新文本视图内容。为此，我需要计算一个完整的滚动文本视图的持续时间。有没有什么方法可以找到相同的。请帮帮我。感谢并致以问候

浏览 2提问于2011-06-21得票数 2

1回答

我再问一遍，我有很多视频，比如“权力的黑暗-拉卡-教皇-游戏”，它们都没有任何字幕或水印，我先用手制动秒烧掉字幕，然后用这个代码用ffmpeg烧录视频中的水印。:\Users\fady\Downloads\convert\shady.png -filter_complex覆盖=main_w-overlay_w-10:10”-codec:a复制“ 然后用下面的代码将其转换为(C:\Users\shady\Downloads\convert\01*.mp4) do ffmpeg -i "%i“复制-s hd720 -

浏览 0提问于2020-11-19得票数 -1

回答已采纳

点击加载更多