HTML Marquee-scroller 无法显示元素-6ren

HTML Marquee-scroller 无法显示元素

转载作者：行者123 更新时间：2023-11-28 15:45:28

26

4

我的 Marquee scroller 有一个非常奇怪的问题。下面是我的 HTML 和 CSS 实现。

在我的滚动条中，我有 5 个元素。 我想根据底层元素的长度将每个元素容器的宽度保持为可变。

奇怪的是，我的 HTML 页面无法显示任何元素。但是，如果我减少元素的数量(假设为 3)，那么底层元素将按设计显示。

如果有人能告诉我下面代码中出了什么问题，我将不胜感激，即如果元素数量很多，为什么元素没有显示(在我的实际实现中，我实际上有超过 100 个滚动条中的元素)。

预先感谢您的帮助。

HTML

<!DOCTYPE html>
<html lang = "en">
<head><link rel = "stylesheet" type = "text/css" href = "CSS.css"></head>
<body>  
    <div id = "Scroller_ID" class = "Scroller">
        <div class = "Marquee">
            <div class = "Marquee-content">
                    <div class = 'Marquee-tag'>
                        <div class = 'Marquee-tag-Status'>&#11044;</div>
                        <div class = 'Marquee-tag-Content'>
                            fffff
                        </div>
                    </div>
                    <div class = 'Marquee-tag'>
                        <div class = 'Marquee-tag-Status'>&#11044;</div>
                        <div class = 'Marquee-tag-Content'>
                            GGGGGGGGGGGGG
                        </div>
                    </div>
                    <div class = 'Marquee-tag'>
                        <div class = 'Marquee-tag-Status'>&#11044;</div>
                        <div class = 'Marquee-tag-Content'>
                            GGGGGGGGGGGGG
                        </div>
                    </div>
                    <div class = 'Marquee-tag'>
                        <div class = 'Marquee-tag-Status'>&#11044;</div>
                        <div class = 'Marquee-tag-Content'>
                            GGGGGGGGGGGGG
                        </div>
                    </div>
                    <div class = 'Marquee-tag'>
                        <div class = 'Marquee-tag-Status'>&#11044;</div>
                        <div class = 'Marquee-tag-Content'>
                            GGGGGGGGGGGGG
                        </div>
                    </div>
            </div>
        </div></div></body>

CSS

* {
        margin: 0;
        border: 0;
        padding: 0;
    }
.Scroller {
        position: absolute;
        z-index: 400;
        height: 85px;
        margin: 5px auto;
        background: #ffffff;
        padding: 0;
        display: flex;      
        font-size: 16px;
        float: left;
        background-color: hsla(0,0%,90%,1);  
    }
.Marquee {
        margin: 9px 12px 9px 12px;
        background: rgba(256, 256, 256, 0.8);
        padding: 0;
        overflow: hidden;
    }
.Marquee-content {
        display: flex;      
        animation: marquee 7s linear infinite running;
        margin: 0;
        padding: 0;
    }
.Marquee-tag {      
        height: 67px;
    }
.Marquee-tag-Status {
        margin: 0;
        padding: 0;
        height: 100%;
        width: 20px;
        display: inline-block;
        float: left;
        background: rgba(0,0,0,0);
        margin-top: 3px;
        font-size: 9px;
    }
.Marquee-tag-Content {
        display: inline-block;
        float: left;
        margin: 0;
        padding: 0;
        height: 100%;
        min-width: 420px;       
        background: rgba(0,0,0,.5);
        margin-top: 3px;
        font-size: 9px;
    }
@-moz-keyframes marquee {
        0% {
            transform: translateX(0);
            }
        100% {
            transform: translate(-50%);
            }
    }
@-webkit-keyframes marquee {
        0% {
            transform: translateX(0);
            }
        100% {
            transform: translate(-50%);
            }
    }
@-o-keyframes marquee {
        0% {
            transform: translateX(0);
            }
        100% {
            transform: translate(-50%);
            }
    }
@keyframes marquee {
        0% {
            transform: translateX(0);
            }
        100% {
            transform: translate(-50%);
            }
    }

最佳答案

使用 marquee 标签来显示 marquee 元素也在标签中给出方向看下面的例子

<marquee>This is basic example of marquee</marquee>
      <marquee direction = "up">The direction of text will be from bottom to top.</marquee>

关于HTML Marquee-scroller 无法显示元素，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/49939010/

26

4

0

文章推荐： javascript - 选择特定表格行时禁用按钮

javascript - 需要具有自动播放和手动滚动功能的 Scroller
我正在寻找一个自动滚动到末尾并停止并切换到手动导航的滚动条。我尝试谷歌搜索，有成千上万的滚动条，但我需要一个具有自动播放和手动滚动功能的滚动条。用户还可以在自动滚动时通过单击切换到手动滚动，例如 th
Android Scroller 飞向固定位置
我正在尝试使用 Scroller 来移动到固定位置。我的问题是:它最终到达了正确的位置，但它要么只运行一次并立即设置结束位置，要么先非常缓慢地滚动然后跳到最后。编辑: 问题似乎是 a) 我的速度有时
android - 一起滚动两个 Lazy Scrollers
这个问题以前有人问过，但形式不同，针对一些特定的用例，到目前为止还没有答案。我终于让它工作了，所以我在这里分享这个，但这不应该被标记为重复，因为之前所有的问题都指定了特定的东西，比如 Columns
javascript - Zynga Scroller - 为可滚动区域设置起始偏移量
任何熟悉 Zynga Scroller 的人JS库？如何为可滚动区域设置默认偏移量？我使用以下方法为元素设置 CSS: -webkit-transform' : 'translate3d(200p
javascript - jQuery scroller 插件修改
我目前正在使用 Max Vergelli 的 scroller 插件 (http://www.maxvergelli.com/jquery-scroller/)，除了我需要对其稍作修改之外，它非常棒。
HTML Marquee-scroller 无法显示元素
我的 Marquee scroller 有一个非常奇怪的问题。下面是我的 HTML 和 CSS 实现。在我的滚动条中，我有 5 个元素。我想根据底层元素的长度将每个元素容器的宽度保持为可变。奇怪
javascript - jquery scroller 需要一次向下移动一个内容
我有一个 jquery 滚动条，它一次向上移动一个内容。但是当我们点击向上链接时，它会平滑地向下移动多个内容。我希望这个向下移动的链接也一次向下移动一个内容。我已经编辑了 jquery 脚本 bt 无
java - Android Scroller 简单示例
谁能给我一个关于 Scroller 类的简单例子？据我了解，它封装了滚动，所以我需要开始计算然后手动更新必须 ScrollView 到新位置。所以我就试试 Scroller scroller = n
javascript - Zynga Scroller - 检测点击单元格
我在 the github site 上找不到任何示例或者在谷歌搜索如何检测 Zynga Scroller 的点击事件时。例如，从 Pull-to-refresh 开始演示它包含此代码: if ('
javascript - Jquery Scroller 需要在到达结束后停止滚动
我正在我的一个网站中使用滚动条。当我单击向下箭头将滚动条滚动到末尾时，到达了 10:00 PM。再次，如果我单击向下箭头，滚动条再次向上移动，整个内容消失。如果结束时间 [Here 10:00 PM]
推荐一个react上拉加载更多插件：react-infinite-scroller
在开发网页和移动应用时，经常需要处理大量数据的展示和加载。如果数据量非常大，一次性全部加载可能会导致页面卡顿或崩溃。为了解决这个问题，我们可以使用无限滚动（Infinite Scroll）的技术。Re
javascript - 列不适合标题 - 带有 Scroller 插件的数据表
我正在将 Datatables 与 Scroller 插件和服务器端加载一起使用。加载数据时，标题列会调整大小，并且通常(并非总是)不适合内部列。情况图片(http://i.stack.imgur.
android - Scroller 不显示其余的 listView 内容
我使用了来自此链接的 bounceScroller 库:https://github.com/coderkiss/BounceScroller 我的布局有这样的结构:
javascript - Scroller 在 javascript 中不工作
我正在运行一个 javascript 来在图像放大时向下滚动图像，但滚动条不起作用这是脚本 $(function(){ // Add a custom filter to recog
javascript - Auto DIV Scroller 脚本上的图形滚动条修改
我们正在使用这个自动滚动脚本:http://scripterlative.com/files/autodivscroll.htm (底部版本)。但是，我们真的卡住了，因为我们不知道如何将滚动条一侧的
jquery - iPad translate3d Scroller 不够自然
我为我正在处理的工具包制作了一个滚动脚本，但它似乎不够自然我不确定如何让它更流畅也许有人可以帮助我:) 密码! :) var startX, offsetX, extraX, diffX, newX,
javascript - 未捕获的类型错误对象没有方法 'to top scroller'
我从这个链接得到了插件http://www.jqueryscript.net/other/jQuery-Plugin-For-Smooth-Scroll-To-Top-Bottom-scrollToT
javascript - 如何使用服务器端处理和 Scroller 扩展刷新 DataTable
我尝试使用这些方法: 使用 api().draw(false) 函数，但它会重置滚动偏移。使用 api().ajax.reload(null, false)。它也会重置滚动偏移。使用 dataTa
c++ - SDL side-scroller 滚动不一致
所以我正在对我以前的项目(我在此处发布用于代码审查)进行升级，这次实现了一个重复的背景(就像卡通中使用的那样)，这样 SDL 就不必加载非常大的图像对于一个级别。然而，程序中存在一个奇怪的不一致:用户
jquery - 如何使用 Sly Scroller jQuery 基于项目的导航？
我正在尝试利用Sly Scroller用于水平滚动。我尝试阅读和理解文档，但我只是不明白如何使用它。任何人都可以帮助我开始使用比阅读文档更简单的示例，甚至指定任何 jsfiddle 实现或有关该主题

首页

博学

6Ren·AI

商城

HTML Marquee-scroller 无法显示元素