jQuery Marquee 滚动文本在 Bootstrap 模式中不起作用答案

【问题标题】：jQuery Marquee scrolling text won't work within a Bootstrap ModaljQuery Marquee 滚动文本在 Bootstrap 模式中不起作用
【发布时间】：2018-11-22 07:18:25
【问题描述】：

我有一个引导模式，我希望在其中包含选取框滚动文本。但是，它在模式之外工作，而不是在其中。

<marquee class="section-flash-marquee" behavior="alternate" scrolldelay="100">Bouncing text...</marquee>

这是一个演示： http://jsfiddle.net/CxdUQ/3045/

所以我的问题是如何让滚动文本在模式中工作？

                    &lt;marquee class="section-flash-marquee" behavior="alternate" scrolldelay="100"&gt;Bouncing text...&lt;/marquee&gt;

^^ 或者是否有 CSS 或 jQuery 方法来重新创建上述内容，以便文本来回滚动？

谢谢

【问题讨论】：

查看my answer 到类似问题和the answer 到重复问题

标签： jquery html css

【解决方案1】：

Marquee is obsolete，并且可能出现意外行为。

【讨论】：

【解决方案2】：

正如所指出的，marquee 已弃用，可能无法提供您需要的结果。

您可以使用其他一些插件和库来实现此目的，或者您可以自行开发：

DeSade 需要 jQuery

我前段时间写了这个，可能对你有用。不过，从未将它与 Bootstrap 一起使用 - 如果它对您有任何好处，欢迎您使用或修改它：

<script src="DeSade.js"></script>

var duration = 15000;

// Create new instance
var marquis = new DeSade("id_of_parent_container", "id_of_new_marquee_element");
marquis.newMarquis("Text to display", duration);

同时在鼠标悬停时暂停滚动效果，您会发现一个演示 here -- 只需播放曲目，选框沿音频播放器顶部滚动。

这是一种针对特定目的的快速破解，因此只针对一个方向（从右到左），但很容易根据您的目的进行修改。

希望对你有帮助。

编辑：

正如我在下面的评论中所说，这样的事情可以用纯 CSS 来实现，这是一个非常简单的示例，可以根据您的需要进行调整：

<!DOCTYPE html>
<html lang="en">
    <head>
        <style>
            #outer {
                position: absolute;
                top: 0%; left: 0%;
                width: 100%; height: 100%;
            }

            #inner {
                animation: marquee 10.0s infinite;
                position: absolute;
                width: 100%;
                text-align: center;
            }

            #marquee {
                width: auto;
                color: #F00;
            }

            @-webkit-keyframes marquee {
                0% { 
                    animation-timing-function: linear;
                    transform: translate(-45%, 0px);
                }
                50% { 
                    animation-timing-function: linear;
                    transform: translate(45%, 0px);
                }
                100% { 
                    animation-timing-function: linear;
                    transform: translate(-45%, 0px);
                }
            }
        </style>
    </head>
    <body>
        <div id="outer">
            <div id="inner">
                <div id="marquee">
                    Some text
                </div>
            </div>
        </div>
    </body>
</html>

获得所需效果所需的一些技巧，但可能对您有用 - 也许比我有更多 CSS 技能的其他人可以想出更灵活的东西。

希望这有帮助。

【讨论】：

我需要一个能像演示一样自我反弹的产品。我能够找到的示例似乎都在屏幕外，然后重新开始。
您可以使用 CSS3 动画来实现这一点。
我已经用一个简单的例子更新了我的答案，你所说的使用基本的 CSS 动画/过渡。