js实现div跑马灯
基础概念
跑马灯（Marquee）是一种常见的网页效果，用于在页面上循环滚动显示文本或图像。通过JavaScript可以实现更加灵活和动态的跑马灯效果。
优势
- 吸引注意力：动态内容更容易吸引用户的注意力。
- 信息展示：适合展示新闻、公告等重要信息。
- 节省空间：可以在有限的空间内展示更多内容。
类型
- 水平滚动：内容从左到右或从右到左滚动。
- 垂直滚动：内容从上到下或从下到上滚动。
- 多行滚动：多行文本同时滚动。
应用场景
- 新闻网站：实时更新的新闻标题。
- 广告牌：商场或公共场所的信息展示。
- 社交媒体：动态更新的帖子摘要。
实现方法
以下是一个简单的JavaScript实现水平滚动跑马灯的示例：
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>跑马灯示例</title>
<style>
#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%); }
}
</style>
</head>
<body>
<div id="marquee">
<span>这是一个跑马灯效果的示例。欢迎来到这里！</span>
</div>
</body>
</html>JavaScript
document.addEventListener("DOMContentLoaded", function() {
const marquee = document.getElementById('marquee');
const content = marquee.querySelector('span');
const contentWidth = content.offsetWidth;
const marqueeWidth = marquee.offsetWidth;
// 复制内容以实现无缝滚动
content.innerHTML += ' ' + content.innerHTML;
// 调整动画时间以适应内容长度
const duration = (contentWidth / marqueeWidth) * 15; // 15秒为基础时间
content.style.animationDuration = `${duration}s`;
});可能遇到的问题及解决方法
- 滚动不流畅：
- 原因：可能是由于页面其他元素的渲染阻塞了主线程。
- 解决方法：优化CSS和JavaScript，减少重绘和回流，使用
requestAnimationFrame进行动画控制。
- 内容溢出：
- 原因：内容长度超过了容器宽度。
- 解决方法：确保容器宽度足够大，或者动态调整内容的显示长度。
- 动画停止：
- 原因：可能是由于JavaScript错误或者浏览器兼容性问题。
- 解决方法：检查控制台是否有错误信息，确保所有元素和样式都正确加载和应用。
通过以上方法，可以实现一个简单且高效的跑马灯效果。如果需要更复杂的功能，可以进一步扩展和优化代码。
相关·内容
提示如何使用Hammer.js. 1 DIV实现简单的拖放：Javascript: this.style.top = tapY;我需要做这个div情况并
浏览 2提问于2014-11-25得票数 0
我想知道为什么下面的代码不能工作，其中"banner“是四个不同div中每一个的css类。结果页面在一秒钟内显示所有图像，然后它们都消失了。
浏览 3提问于2011-08-31得票数 0
回答已采纳
我目前正在进行一个实现fullpage.js端口的Range2项目，在这里可以找到。我正试图在我的一个部分上实现scrolloverflow，但我不知道如何实现它。/node_modules/fullpage.js/dist/jquery.fullpage.min.js",
"../node_modules/fullpage.js/dist/jquery.full
浏览 2提问于2017-07-17得票数 2
1回答
我们使用remote: true处理表单，并使用create.js.erb/update.js.erb视图来管理响应。
浏览 0提问于2016-11-01得票数 0
代码：
// Child Component template: `<div>Child ComponentProp Value : {{text}} </div>`, props: { } co
浏览 0提问于2018-10-16得票数 2
2回答
我有一个web应用程序与三个框架(横幅，菜单，内容)的菜单框架需要有一个动态上拉菜单示例： - Create - Delete
- Create - Delete - Create - Delete+ Classrooms一些用户会看到所有的东西。
有没有什么东西能提供
浏览 5提问于2011-09-07得票数 3
回答已采纳
/component.js', () => {});jest.mock('../component.js') return {
render:
浏览 3提问于2019-09-22得票数 0
我正在尝试从这篇文章中创建一个工具提示
我将此添加到我的script.js中 }; });<divclass="popover-content">
浏览 0提问于2014-05-21得票数 0
下面的jQuery代码行在JavaScript中的等价物是什么？ $("form[name="+x+"] input[name="+y+"]").val();
浏览 1提问于2013-06-19得票数 0
也许在js中有其他的方法？我正在尝试.includes(document.querySelectorAll(".js-open-user"))；，但那不起作用。, (event) => { .composedPath() .composedPath()
.i
浏览 31提问于2021-02-09得票数 0
回答已采纳
我对Next.js相当陌生，到目前为止我一直有着非常棒的体验。但是，我很困惑如何在Next.js中实现以下代码的等效--所有这些都是客户端路由和在用户页面中呈现嵌套组件。<div> <SecondaryNavbar/> <Route path={`${currentPath}/dashboardpath={`${currentPath}
浏览 0提问于2018-10-27得票数 2
1回答
我使用的是反应钳，它在幕后使用clamp.js。this.props.events.map((event,i) => { <Clamp clamp={2}>The is a reallylong event name</Clamp>})
如果this.props.events是静态设置的，这是很好的，但是这些事件是异步获取的，这些事件在加载时会呈现在其中。这是否与实现</
浏览 6提问于2017-08-23得票数 0
2回答
代理检测
、、
代理操作报头，所以我决定用js和php检查页面地址，如果它们等于=>，就不使用代理。但我认为我的实现不正确。<script src="http://code.jquery.com/jquery-1.5.1.min.js"></script>
</s
浏览 2提问于2011-03-30得票数 0
回答已采纳
我正在尝试布局不同大小的div的网格(它们包含图像和文本)。我希望它们从左到右流动，但对于较低的项，则在较高项的下方紧凑。我很难描述这一点，我已经包括了一张我想要实现的图画，数字表示div的顺序。
我在使用中见过这种情况，似乎所有的div都是使用绝对定位放置的。
有人知道如何实现这种布局吗？
浏览 3提问于2015-04-02得票数 0
2回答
当我在智能手机(iPhone)或MacBook上使用Safari浏览器查看我的网站时，我网站的某些元素会比浏览器窗口更宽，例如body-tag。我已经用dev-tool检查了网站，它似乎是从600px的宽度开始的，并且在下面。我在Chrome中看不到这个问题。
我之所以应用这个CSS规则，是因为我读到这篇文章应该可以解决这个问题，但不幸的是，它不适合我。 -webkit-box-sizing: border-box;
-moz-box-sizing: border-box
浏览 27提问于2017-02-08得票数 17
回答已采纳
2回答
我试图在模态视图中实现引导的日期时间选择器，如下面的屏幕截图：我的代码如下：<div class="modal-content">> <div class="form-group>
</
浏览 2提问于2015-08-19得票数 1
回答已采纳
我准备了一个jsfiddle示例：
有人知道怎么解决这个问题吗？
奖励问题:当你第一次点击工具提示时，你会得到配置好的动画。当您关闭工具提示并再次单击帮助图标时，将弹出没有动画的工具提示。如何改变这一行为，使其在显示时始终获得良好的动画效
浏览 0提问于2012-03-08得票数 1
回答已采纳
1回答
我是Joomla的新手，我需要建立一个包含徽标的简单页面，当点击任何徽标时，我需要看到弹出消息与我点击的徽标描述，关闭按钮也应该包括在内。
浏览 4提问于2020-06-08得票数 1
我有一个我想要实现的rails应用。 如果conditions limit(4)显示4个div元素，如何自动显示静态div元素？我想要实现的是，当4个帖子框在浏览器中显示时，这将只显示Apply for our Program div元素的静态元素。end %> <div class="border-box">
浏览 11提问于2020-07-16得票数 1
回答已采纳
如果是bootstrap，我可以使用typeahead等，但这是一个基础框架网站，包括bootstrap js和css会导致与基础css和js的冲突。
浏览 5提问于2015-03-29得票数 0
云服务器
ICP备案
对象存储
腾讯会议
云直播
腾讯云开发者
