東京都新宿区のWeb制作会社 ウェブラボ株式会社

クリエイターブログ

jQueryを利用してシンプルなティッカーを作る

2014.08.25 Posted by

こんにちは。ウェブラボ技術メモ第4回目です。

今回はjquery.simpleTicker.jsを使ってシンプルなニュースティッカーを作ってみたいと思います。

ティッカーとは…
特定範囲内に文字列を流して表示させる表示方式のことである。右から左(あるいは上から下へ)文字が次々に流れてゆくのを読ませる方式であるので、限られた狭い領域で多くの情報を表示することができる。
IT用語辞典より

新幹線の車内や看板、証券取引所などにある電光掲示板と言えば想像がつくと思います。
これをサイトに設置したいと思います。

今回はjQueryのプラグインを使用しますのでjquery.jsも一緒に読み込ませます。

■HTML head内

HTMLはリストを作るだけです。
さきほどheadで指定したid(#ticker-fade)を指定するのを忘れないようにしましょう。

■HTML

CSSはある程度自由に指定が出来ますが、シンプルに作成するデモでは下記のようにします。

■CSS

完成したデモはこちらです

いかがでしょうか。
ニュースティッカーを作成するプラグインとしては他にもこのようなプラグインがあります。

・フレキシブルな垂直型のニュースティッカー
jquery-advanced-news-ticker
・文字をタイプしているようなニュースティッカー
jQuery News Ticker

使用用途や、好みの動きに合わせて設置してみるのも良いと思います。
以上、ウェブラボ技術メモでした。

オリエンシートダウンロード

オリエンシートダウンロード

PAGETOP

お問い合わせContact

まずはお気軽にご相談ください。

Web制作・コンサルティング・システム開発に関するお問い合わせ・お見積もり依頼は、
電話・問い合わせフォームより受け付けております。(受付時間:平日9:30〜18:30)

〒160-0004 東京都新宿区四谷4丁目33-2
マーキュリースクエア4F

TEL:03-5366-3277 FAX:03-5366-3278