スクリプトを組み込んだら完成!
あとは、スクリプトを組み込みます。独自に作成したスクリプトは別ファイル「marquee.js」として保存しておき、<script>タグを使って読み込ませます。今回は、liscrollライブラリ/marquee.jsともにjQuery 1.3.1を使用していますので、先にjQueryライブラリを読み込ませるため、以下のように書きます。
<script type="text/javascript" src="js/jquery-1.3.1.min.js"></script>
<script type="text/javascript" src="js/jquery.li-scroller.1.0.js"></script>
<script type="text/javascript" src="js/marquee.js"></script>
以上で作成は完成です。今回は既存のライブラリ(liscroll)を拡張する機能を独自に作成しましたが、jQueryを使うことで比較的手軽に必要な機能を実現できました。サンプルをベースにいろいろと手を加えてみてもおもしろいかもしれません。試してみてください。
次回は、今回の「東京食べ歩きガイド」にちょっと変わった動きのUIを追加していきます。どうぞお楽しみに。
(作例デザイン:wataru)
■もっと勉強したい人のためのオススメBOOK(Amazon.co.jp)