这种无缝的字幕风格使每个滚动都有点抖动

This seamless marquee style kind of jitters each scroll

本文关键字：滚动 抖动 风格 字幕      更新时间：2023-09-26

我用这段代码创建了一个向上滚动的字幕文本，但在7000毫秒后，它会抖动，因此无法很好地显示里面的文本。

你知道我在哪里能修好吗？

<script language="javascript">
jQuery(function() {
    var marquee = jQuery("#marquee");
    marquee.css({"overflow": "hidden", "height": "100%"});
    marquee.wrapInner("<span>");
    marquee.find("span").css({ "height": "50%", "display": "inline-block", "text-align":"left" });
    marquee.append(marquee.find("span").clone());
    marquee.wrapInner("<div>");
    marquee.find("div").css("height", "200%");
    var reset = function() {
        jQuery(this).css("margin-top", "0%");
        jQuery(this).animate({ "margin-top": "-100%" }, 7000, 'linear', reset);
    };
    reset.call(marquee.find("div"));
});

顺便说一句，你可以像这个一样

<div id="marquee">text</div>

[UPDATE]很抱歉Kamal不得不编辑这篇文章来添加jsfiddle来重现这个问题[我一直知道我可以做到：-D]http://jsfiddle.net/xRcwH/

为什么不使用<marquee>标记？

<marquee  behavior="scroll" direction="up">Your upward scrolling text goes here</marquee>

我已经在<字幕>html标记用法/replacment。

有CSS3 WebKit特定的-webkit-marquee-，您可以在http://davidwalsh.name/webkit-marquee-css.然而，无论出于何种原因，即使是原生的CSS marquee实现也会出现故障。

这同样适用于<marquee>元素。它得到了浏览器的良好支持，不过，除了被弃用之外，它还有一些小故障。

我一直在寻找最有效的和跨浏览器支持的字幕实现。以上都不符合要求。常见的方法是使用timer（或jQuery animate实现）来调整元素的CSS margin属性。这就是脚本的作用。不幸的是，这项行动非常耗费资源。它需要每隔几毫秒应用一次新的CSS，从而重新计算整个布局。

我提出了一个实现，该实现将CSS3转换用于支持它的浏览器，并以其他方式动画化包含元素的scrollLeft属性。这是一个实验性的实现，尽管它可以很好地与IE7+配合使用。代码可在https://github.com/gajus/marquee（演示https://dev.anuary.com/60244f3a-b8b2-5678-bce5-f7e8742f0c69/)。

相关文章：