タイプライター風に文字を表示！jQueryプラグイン「jquery.newsTicker」
caraldo.net | WebとiPhoneとロードバイクが大好き！ » プログラミング » JavaScript » タイプライター風に文字を表示！jQueryプラグイン「jquery.newsTicker」
タイプライター風に文字を表示するjQueryプラグイン「jquery.newsTicker」をご紹介。
まずはサンプルです。
⇒タイプライター風に文字を表示するjQueryプラグインのサンプル
使いどころ難しそうですが、marqueeタグの代わりになりそうな気がします。
配布元では
News ticker in the style of that used on the BBC news site.
と紹介されていてBBC風とのことです。BBCってニュースという事以外、良く分からないんで言い換えてみました。
配布元⇒jQuery plugins » MakeMineATriple
DL先⇒Plugins | jQuery Plugins
1.ｊQueryとjquery.newsTicker.jsを読み込む
まずはｊQueryと配布元よりDLしたjquery.newsTicker.jsを読み込みます。
head要素内に以下の記述を追加します。
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
前回同様Google AJAX APIを使用してjQueryを読みこんでいます。
3行目のパスは適宜変更してください。
2.どの要素をどういう動きにするかoptionで指定する
続けてhead要素内に以下のScriptを記述してあげます。
それぞれ何の役割をしているかはコメントの通りです。
サンプルなので分かりやすく「■」「◇」としていますが、この二つで指定するのはやめましょうｗチカチカします。
3.タイプライター部分の(X)htmlを作成
2番のoptionで指定した要素を用意してあげます。
今回は以下のようになっています。
- ここのulのIDやクラスをscriptのoptionで指定してあげます。
- li要素内のテキストがタイプライター風に表示されます。
- リンクなんかも出来ちゃいます。
これだけで完成です。
⇒タイプライター風に文字を表示するjQueryプラグインのサンプル
使いどころが難しいですが、目はひきますね。
またまたお手軽系でした。