1

Twitter のようなマーキー効果を作るアイデアを持っている人はいますか? そのスチームレス（ループが終了するのを待つのを止めない）+開始と終了でのフェード。ありがとう。

編集

わかりました編集、ここで1つのセミスチームレスを見つけましたhttp://jsbin.com/uyawi/3/editしかし、まだ遅れています+実際にはストリームレスではありません.CSSを使用しているためですか？

4

2 に答える 2

5

彼らのコードを見てください。彼らは、100% 不透明から 100% 透明にフェードする 2 つの PNG 画像を配置しました。<li>2 つの要素は、 のリストの最後にある独自の 内<li>と 内に配置され<ul>、CSS を使用して の両側に浮動するように配置されます<ul>。

Firefox+Firebug または Safari/Chrome と開発者のツールバーを使用することを強くお勧めします。これらすべてのツールには「Inspect Element」と呼ばれる機能があり、ドキュメント内の特定の要素にすばやくドリルダウンしてその CSS を読み取ることができます。

[編集] 来週かそこらでスクローラーを構築する必要があるため、今日何かを書きました。私のコードは Adob​​e Air に統合される予定なので、クロスブラウザー チェックは行っていません。ここの CSS は、微調整が必​​要になる可能性があります。最初にRemy Sharp の Silky Smooth Marqueeで遊んでみましたが、そのコードを追加すると、ほとんどの HTML が破棄されて再作成され、透明な翼の統合が難しくなります。スクローラーを作成するコードはそれほど難しくないので、自分で作成しました。以下のコードは 5 つの部分に分かれています。

1. 幕間イメージ

これを機能させるために、一時的に Twitter の幕の画像を借りて、私の webroot に保存しました/images/left-right-fader.png。彼らのフェーダーは特定の配色用なので、自分のものに交換します。善良な市民になり、あなた自身のものも作りましょう。この場合の画像は幅 120px で、左のカーテンが左端にあり、右のカーテンが [60,0] ポイントにあります。つまり、左端の不透明度 100% から中央の不透明度 0%、右端の不透明度 100% にフェードする単一の 120px 幅の画像です。画像のサイズを変更する場合は、CSS も変更する必要があります。タイル張りなので高さは問いません。

追加点: Webkit または Firefox ブラウザーをターゲットにしている場合は、画像を削除して、グラデーションの背景を持つ通常の HTML 要素 (div/span) を使用できるはずです。

2.CSS

body,div {border:none;padding:0;margin:0;}
div#marquee {
    position:relative;
    overflow:hidden;
    background-color:#000;
    color:#ddd;
}
div#marquee div.scrollingtext {
    position:relative;
    display:inline;
    white-space:nowrap;
}
div#marquee div.fader {
    width:60px;
    position:absolute;
    background:url(/images/left-right-fader.png) repeat-y scroll 0 0 transparent;
    top:0;
    left:0;
}
div#marquee div.fader.left {
    background-position:-60px 0;
    left:auto;
    right:0;
}

3. マーキーの「クラス」

使用法：

var mMarquee = new Marquee(jTarget,strText,intWidth);
  1. jTargetは、スクローラーを表示する空の div への jQuery 参照です (たとえば、マーキーを に表示する<div id="myMarqueeDiv"></div>場合は、$('div#myMarqueeDiv')
  2. strText- スクロールしたい文字列;
  3. intWidth- スクローラーの幅。

現在、Marqueeパブリック メソッドを持たないオブジェクトを返します。いくつかのパブリック メソッドを追加するのは簡単です (たとえば、stop()メソッドまたはrestart()メソッドとして)。

コードは次のとおりです。

var Marquee = function(j,s,w) {
    var self = this;
    var jTarget = j;
    var strText = s;
    var intWidth = w;
    var intPaddingLeft = 60;
    var jText,intTextWidth;
    var update = function() {
        intPaddingLeft -= 2;
        if (intPaddingLeft < -intTextWidth) {
            intPaddingLeft += intTextWidth;
        }
        jText.css({'left':intPaddingLeft + 'px'});
    };
    var setup = function() {
        jText = $('<div class="scrollingtext"></div>').text(strText);
        jTarget
            .append(jText)
            .append($('<div class="fader"></div>').html('&nbsp;'))
            .append($('<div class="fader left"></div>').html('&nbsp;'));
        intTextWidth = $(jTarget).find('.scrollingtext').width();
        jTarget.width(intWidth);
        jText.text(strText + " " + strText);
        update();
    };
    setup();
    setInterval(update,30);
    return self;
};

4.HTML

この特定の例では、私の体は次のようになります。

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

5. 実装コード

strLoremIpsum = "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut...";

jQuery(function($) {
    myMarquee = new Marquee($('div#marquee'),strLoremIpsum,500);
});
于 2010-07-04T16:31:45.567 に答える
0

マーキーで使用できるいくつかの新しい属性があります- onscrollstart と onscrollend (私は思う)-これらを使用して、コンテンツの不透明度を調整できます。または、マーキーの周りにスパンを配置することもできます - それを position:relative にしてから、2 つの反対のフェージング png をスパンに配置します (position:absolute;left:0 もう一方の right:0)。

于 2010-07-04T19:02:01.813 に答える