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>

[更新]問題を再現するためにjsfiddleを追加するためにこの投稿を編集しなければならなかったカマルに申し訳ありません[私はこれを行うことができることを常に知っています:-D] http://jsfiddle.net/xRcwH/

4

2 に答える 2

0

<marquee>htmlタグの使用法/置換で同じ質問にすでに回答しました。

CSS3 WebKit固有のものがあり、 http：//davidwalsh.name/webkit-marquee-css-webkit-marquee-で読むことができます。ただし、何らかの理由で、ネイティブのCSSマーキーの実装でさえ問題があります。

同じことが要素にも当てはまります<marquee>。これはブラウザによって十分にサポートされていますが、非推奨になることを除けば、グリッチがあります。

私は、最も効率的でクロスブラウザでサポートされているマーキーの実装を探していました。上記のどれも法案に適合しません。一般的なアプローチは、タイマー（またはjQueryアニメーション実装）を使用して要素のCSSマージンプロパティを調整することです。これはあなたのスクリプトが行うことです。残念ながら、この操作は非常に多くのリソースを消費します。数ミリ秒ごとに新しいCSSを適用する必要があり、その結果、レイアウト全体が再計算されます。

CSS3トランジションをサポートするブラウザーにCSS3トランジションを利用する実装を思いついたのですが、それ以外の場合scrollLeftは、包含要素のプロパティをアニメーション化します。これは実験的な実装ですが、IE7+ではうまく機能します。コードはhttps://github.com/gajus/marquee（デモhttps://dev.anuary.com/60244f3a-b8b2-5678-bce5-f7e8742f0c69/）で入手できます。

于 2013-01-11T20:11:26.340 に答える
-1

why not use the <marquee> tags?

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