skuare.netはJavaScriptライブラリのjQuery,mootools,prototypeのプラグインを中心にWebサイト構築に関する技術を試す個人サイトです
JavaScriptで画像を簡単にスクロールさせられる「simplyScroll」
｜
｜
｜
｜
｜
｜
スクロールさせるJavaScriptは多いですが、simplyScrollほど簡単なものは、あまりないでしょう。
JvaScriptライブラリ「jQuery」のプラグインです。
使用方法
simplyScrollから、jquery.simplyscroll.js、jquery.simplyscroll.cssをjQueryからjquery.jsをダウンロードします。
<link rel="stylesheet" href="jquery.simplyscroll.css" media="all" type="text/css">
<script src="jquery-1.3.js" type="text/javascript"></script>
<script src="jquery.simplyscroll.js" type="text/javascript"></script>
<script type="text/javascript">
(function($) {
$(function() {
$("#id名").simplyScroll();
});
})(jQuery);
</script>
上記を記述したら、スクロールさせたい画像をid名でくくれば完成です。
<ul id="id名">
<li><img src="画像パス" /></li>
<li><img src="画像パス" /></li>
～画像分～
</ul>
なお、オプションとして以下のようなものがあります。
frameRate 24 //フレームレート
speed 1 //スピード
horizontal true //縦方向はfalse
pauseOnHover true //マウスオーバーでとめる
JavaScriptで画像を簡単にスクロールさせられる「simplyScroll」サンプル
記事作成：2009年02月19日
▼JavaScriptで画像を簡単にスクロールさせられる「simplyScroll」へのコメントはtwitterにて受け付けています。
twitterでコメントする
前の記事：フォームのユーザビリティを再考してコンバージョンを向上
次の記事：JavaScriptでスライド式のナビゲーションメニューを作る「Sliding Submenu」
