Question

我正在使用此代码创建一个向上滚动的字幕文本但在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/

Answer 1

我已经在<marquee> html tag usage/replacment回答了同样的问题。

CSS3 WebKit特定-webkit-marquee-，您可以在http://davidwalsh.name/webkit-marquee-css阅读。但是，无论出于何种原因，即使是原生的CSS选框实现也是一个小故障。

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

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

我想出了一些实现，它将 CSS3过渡用于支持它的浏览器，并以其他方式为包含元素的scrollLeft属性设置动画。这是一个实验性的实现，虽然它适用于IE7 +。该代码位于https://github.com/gajus/marquee（演示https://dev.anuary.com/60244f3a-b8b2-5678-bce5-f7e8742f0c69/）。

Answer 2

为什么不使用<marquee>代码？

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

这种无缝的选框样式每个滚动都会产生不安

2 个答案: