ニュースを横に流すaScroller-1.0.js

■基本形

【以下はメモ】

よく見るタイプのニュースティッカーなので簡単かと思いきや、四苦八苦。

いろいろと調整しないと1項目めしか流れない。以下のような作業を重ねてやっと数項目をテレビのテロップのように流すことができた。


(1)流したい数項目のテキストを囲むdivのスタイルはHTMLに書かねばならない。(CSSに書いた外部ファイルだと読み込まれない。)
(2)流したい数項目のテキストを一度(1)のdivで囲んで羅列して書いた後、その下にさらにnobrタグ(改行しない指示)やspanタグ(インライン要素として扱う指示)でくくらなければならなかった。 この場合のspanタグのスタイルもhtml上に書く。

(3)javascriptは(1)(2)の処理の後に書く。いつものようにheadの中には書かないようにすること。 nobrタグは無くても私の環境では問題なかったが入れておいてみた。
というわけで、扱いがとても難しいjQueryでした。

■応用編

■その他

『ジョルダーニ家の人々』7月21日より岩波ホールにて公開!傑作『輝ける青春』に続く、イタリア大河ドラマの誕生! 揺れ動く時代を背景に、一組の家族の離別と再生を通して、“決して変わることのないもの”とは何なのかを描く感動のドラマを一挙上映!

テキストにリンクも付けず、1項目だけを流すのならシンプルに「marquee」を使う手もあり。