2

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

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

4

2 回答 2

0

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

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

这同样适用于<marquee>元素。浏览器很好地支持它，但是，除了被弃用之外，它还存在故障。

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

我想出了在支持它的浏览器上使用CSS3 转换scrollLeft的实现，并以其他方式为包含元素的属性设置动画。这是一个实验性的实现，尽管它在 IE7+ 上运行良好。该代码可在https://github.com/gajus/marquee获得（演示https://dev.anuary.com/60244f3a-b8b2-5678-bce5-f7e8742f0c69/）。

于 2013-01-11T20:11:26.340 回答
-1

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

<marquee  behavior="scroll" direction="up">Your upward scrolling text goes here</marquee>
于 2012-09-11T17:12:09.573 回答