動きのあるサイトが簡単に作れるjQuery
短いコードで多くの処理を行うことができるjQuery。これまで長いコードが必要だったものが、jQueryを使うことで、簡単に動きのあるサイトを作ることが可能になりました。
jQueryでよく使う機能：画像を変化させる
例えば、画像の上にマウスをポイントするだけで画像が変わる機能。下層ページにユーザーを誘導するサイトではよく使われる機能です。jQueryでは、マウスオーバー効果を簡単に実施することができます。
まず、2つの画像を用意します。マウスオーバーをしていないときの画像に_off、マウスオーバーしているときには_onを付けるだけです。
$(function(){
$(‘a img’).hover(function(){
$(this).attr(‘src’, $(this).attr(‘src’).replace(‘_off’, ‘_on’));
}, function(){
if (!$(this).hasClass(‘currentPage’)) {
$(this).attr(‘src’, $(this).attr(‘src’).replace(‘_on’, ‘_off’));
}
});
});
jQueryを使うことで、それまでの半分以下のコードでマウスオーバー効果が作成できます。
jQueryでよく使う機能：アコーディオン
メニュー画面やサイドバーで使われることの多いアコーディオン。スマートフォンサイトなどでよく見かける、次々にメニューが動いてくる機能です。
滑らかなスライドができると、サイトの上質感もアップします。
アコーディオンの設置方法は、下記コードを入力するだけです。
●jQueryの入力コード
<script>
$(function(){
$(“#acMenu dt”).on(“click”, function() {
$(this).next().slideToggle();
});
});
</script>
アニメーションの早さは、slideToggleのあとに、(“fast”)、(“slow”)と指定することで、好みに変えることが可能です。
CSS3のnth-of-typeなどを利用して、行ごとにグラデーションカラーを設定することもできます。
jQueryでよく使う機能：Lightboxで利用する
それまでDIVタグはいくつもの工程が必要だったLightboxも、jQueryを使えば簡単にできてしまいます。Lightboxは、Webブラウザーの画面上に別の画面を重ねて動かす機能。画像をクリックすると、周囲が暗くなり、画像が大きくなる動きをします。
また、グループ化することでスライドショーとして見ることもできます。
自分で作成することもできますが、公的ライブラリ群からダウンロードすることも可能です。
●手順
lightbox本体をダウンロード→解凍→htmlのheadタグ内に文字列を指定。
<a href=”画像” rel=”lightbox” title=”文字”>
<img src=”サムネ画像.jpg” alt=”文字” /></a>
lightboxは、バージョン2.51から、それまでのPrototypeからjQueryに変更されているので、入手するときはバージョンの確認が必要です。
jQueryプラグインを探すときには、その特徴もあらかじめ調べておくと便利です。プラグインによっては、iPhone、iPadに対応しないものもあるので注意して下さい。
