jQueryでニュースティッカーをシンプルに実装する方法...

jQueryでニュースティッカーをシンプルに実装する方法｜BlackFlag

jQueryでニュースティッカーをシンプルに実装する方法 Webサイト上での限られたスペースにお知らせなどの 複数にわたる情報を表示させたい際に便利なニュースティッカー。 jQueryプラグインでもいろいろな形状のニュースティッカー用プラグインがありますが シンプル（ベーシック）な動きのニュースティッカーを 極力シンプルなスクリプト構成で実装することが出来ないか試してみたので紹介してみます。 jQueryでニュースティッカーをシンプルに実装する方法 ニュースティッカーの切り替え動作については ------------------- ・フェード切り替え ・画面下からスライドイン ・画面右からスライドイン ------------------- の3パターン構成にしてみます。 まずフェード切り替えパターンのサンプルから。 HTML構成は以下の様になります。 ◆HTML 【News1】このテキストはNewsTicker用のダミーテキスト［1］です。 【News2】このテキストはNewsTicker用のダミーテキスト［2］です。 【News3】このテキストはNewsTicker用のダミーテキスト［3］です。 【News4】このテキストはNewsTicker用のダミーテキスト［4］です。 【News5】このテキストはNewsTicker用のダミーテキスト［5］です。 ULリスト全体をブロック要素で囲み、任意のクラスを付けます。（IDでも可） サンプルではクラス「.ticker」としています。 そして、そのブロック要素に対して、 ニュースティッカーの切り替えエフェクトを何にするか rel属性を使って指定します。 ※上記HTMLではフェード切り替えサンプルとしてrel属性は「fade」になっています。 各指定方法は ------------------- ・[fade] フェード切り替え ・[roll] 下からスライドイン ・[slide] 右からスライドイン ------------------- この様になっています。 これに対してのCSSは以下の様に指定します。 ◆CSS .ticker { margin: 0 auto; padding: 10px; width: 600px; text-align:

http://black-flag.net/jquery/20121114-4332.html