このページの本文へ

懐かしの“マーキー”をjQueryでちょいオシャレに! (4/5)

2009年02月23日 08時00分更新

文●古籏一浩、ASCII.jp

  • この記事をはてなブックマークに追加
本文印刷

スクリプトを組み込んだら完成!

 あとは、スクリプトを組み込みます。独自に作成したスクリプトは別ファイル「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)

この連載の記事

一覧へ

この記事の編集者は以下の記事をオススメしています