jQueryサンプル集

サイト制作時によく使うjQueryのコードをまとめました。

このマニュアルで使用しているバージョンは、1.7.1です。利用する際は、本家サイトで最新版をダウンロードしてください。

目次

  1. スムーススクロール
  2. マウスオーバー時の画像切替
  3. マウスオーバー時の画像の透明度変更
  4. アコーディオンメニュー
  5. スライドパネル
  6. タブパネル
  7. 画像切り替え
  8. lightbox
  9. カルーセル

おまけ:ある程度スクロールしたら、ページの先頭へ戻るボタンを表示させる方法

コードとサンプル

先にjQueryを記述してから、コードを書いてください。(コードは選択してコピーできます。)

	<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>	

CDNを利用する場合は、以下をコピペしてください。

	<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.1.min.js"></script>	

ちなみに現段階では、googleよりmicrosoftのほうがオススメだそうです(jQueryの勉強会に行った時に聞きました)。
また、CDNを利用する利点は、他のサイトで同じjQueryが読み込まれていた場合は、キャッシュを利用するので、読み込み時間を軽減できるそうです。

URL参照先:Microsoft Ajax Content Delivery Network
googleならここが便利:scriptsrc.net

1.スムーススクロール

ページ内移動するとき、滑らかにスクロールさせます。ページ移動をする#タグを書いたa要素にclass="scroll"を追記してください。

サンプル

スライドパネルへ移動!

Javascript

	jQuery.easing.quart = function (x, t, b, c, d) {
		return -c * ((t=t/d-1)*t*t*t - 1) + b;
	};
	
	$(function(){
		jQuery('.scroll').click(function() {
			if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
				var $target = jQuery(this.hash);
				$target = $target.length && $target || jQuery('[name=' + this.hash.slice(1) +']');
				if ($target.length) {
				var targetOffset = $target.offset().top;
				jQuery('html,body').animate({ scrollTop: targetOffset }, 1200, 'quart');
				return false;
				}
			}
		});
	});

HTML

	<a href="#slide" class="scroll">スライドパネルへ移動!</a>

2.マウスオーバー時の画像切替

画像のファイル名の末尾に、マウスオーバー用は「_on」、通常用は「_off」を付けてください。
(_off,_onの前は同じ名前にしてください。)
また、ナビゲーションなどで、現在地を表すのに、class="currentPage" を指定すると、マウスオーバーしないようにできます。(5行目のコードで指定しています)

サンプル

ボタン


Javascript

	$(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'));
			}
		});
	});

HTML

	<a href="#"><img src="images/button_off.jpg" alt="ボタン" /></a>	

3.マウスオーバー時の画像の透明度変更

マウスオーバー時のアクションとして、画像を半透明にします。a要素にclass="oc"を追記すると実装できます。
もし、すべてのリンク付き画像のアクションをこちらにしたい場合は、下記Javascriptの3行目の記述のように、セレクタ$(".oc")→$(a img)に変えてください。

サンプル

ボタン


Javascript

	$(function(){
	$(".oc").hover(function(){
	//$(a img).hover(function(){ ←すべてのリンク付き画像に適応
		$(this).fadeTo("normal", 0.6); // マウスオーバーで透明度を60%にする
		},function(){
		$(this).fadeTo("normal", 1.0); // マウスアウトで透明度を100%に戻す
		});
	});

HTML

	<a href="#" class="oc"><img src="images/button.png" alt="ボタン" /></a>

4.アコーディオンメニュー

サブメニューなどあるときに便利です。

サンプル

メニュー1
サブメニュー1-1 サブメニュー1-2
メニュー2
サブメニュー2-1 サブメニュー2-2
メニュー3
サブメニュー3-1 サブメニュー3-2

Javascript

	$(function() {
		$('#accordion dd').hide();
		$('#accordion dt a').click(function(){
			 $('#accordion dd').slideUp();
			 $(this).parent().next().slideDown();
			 return false;
		 });
	});

HTML

	<dl id="accordion">
		<dt><a href="">メニュー1</a></dt>
		<dd>
			<a href="#">サブメニュー1-1</a>
			<a href="#">サブメニュー1-2</a>
		</dd>
		<dt><a href="">メニュー2</a></dt>
		<dd>
			<a href="#">サブメニュー2-1</a>
			<a href="#">サブメニュー2-2</a>
		</dd>
		<dt><a href="">メニュー3</a></dt>
		<dd>
			<a href="#">サブメニュー3-1</a>
			<a href="#">サブメニュー3-2</a>
		</dd>
	</dl>

5.スライドパネル

アコーディオンメニューとほぼ同じ動きです。

サンプル

ボタン

スライドパネルのサンプルです。ボタンを押すと閉じたり、開いたりします。 スライドパネルのサンプルです。ボタンを押すと閉じたり、開いたりします。スライドパネルのサンプルです。ボタンを押すと閉じたり、開いたりします。スライドパネルのサンプルです。ボタンを押すと閉じたり、開いたりします。

Javascript

	$(function(){
		$(".open").click(function(){
			$("#slideBox").slideToggle("slow");
		});
	});

HTML

	<p class="open">ボタン</p>
	<div id="slideBox">
	スライドパネルのサンプルです。ボタンを押すと閉じたり、開いたりします。 スライドパネルのサンプルです。ボタンを押すと閉じたり、開いたりします。スライドパネルのサンプルです。ボタンを押すと閉じたり、開いたりします。スライドパネルのサンプルです。ボタンを押すと閉じたり、開いたりします。
	</div>

CSS

スライドさせる#slideBoxは、デフォルトではCSSで非表示の制御をしています。

	.open {
		width:50px;
		margin: 10px 0;
		padding: 10px;
		background:#66CC99;
		cursor: pointer;
	}
	#slideBox {
		display:none;
		padding: 10px;
		border: 1px solid #BFFFBF;
	}

5.タブパネル

よくあるタブで切り替えするUIです。javascriptだけでも実装できるのですが、jQueryだとより短いコードで書けるのがいい所です!

サンプル

内容1です。jQueryってとっても便利ですよね。簡単にいろんな動きが実装できるし、クロスブラウザにもなるし。ほんとうに素晴らしいです。
内容2です。簡単なコードなら、自分で書けるようになるとより便利です。CSSのセレクタを利用するので、コーダーやWebデザイナーにもやさしいです。
内容3です。最近は、jQuery Mobileも登場していますね。ある程度カスタマイズもできるので、時間がないときは利用すると、すばやくスマートフォン用のサイトが作れます。でも、フルカスタマイズするとなると、1から作ったほうが早い場合もあるようなので、使いどころを見極めることが重要です。

Javascript

	$(function(){
		$(".panel:not(:first)").hide();
		$("#tabs a").click(function() {
			$(".panel").hide();
			$(".panel").filter(this.hash).show();
			$("#tabs a").removeClass("selected");
			$(this).addClass("selected");
			return false;
			}).filter(":first").click();
	});

HTML

	<ul id="tabs">
	<li><a href="#tab01">タブ1</a></li>
	<li><a href="#tab02" >タブ2</a></li>
	<li><a href="#tab03" >タブ3</a></li>
	</ul>
	
	<div id="tab01" class="panel">内容1です。jQueryってとっても便利ですよね。簡単にいろんな動きが実装できるし、クロスブラウザにもなるし。ほんとうに素晴らしいです。</div>
	<div id="tab02" class="panel">内容2です。簡単なコードなら、自分で書けるようになるとより便利です。CSSのセレクタを利用するので、コーダーやWebデザイナーにもやさしいです。</div>
	<div id="tab03" class="panel">内容3です。最近は、jQuery Mobileも登場していますね。ある程度カスタマイズもできるので、時間がないときは利用すると、すばやくスマートフォン用のサイトが作れます。でも、フルカスタマイズするとなると、1から作ったほうが早い場合もあるようなので、使いどころを見極めることが重要です。</div>

CSS

表示しているタブのボタンには、class="selected"が動的に追加されます。なので、CSSで選択されているタブの色などを変える指定をすれば、サンプルのように背景色をつけることができます。

	.selected {
		background: #CCC;
	}
	

7.画像切り替え

ギャラリーなどで、画像をクリックしたり、マウスオーバーすると、画像が切り替わるUIです。基本的な動きのものと、少しアニメーションを追加したもの、2つサンプルを用意しましたので、どちかお好みの方をご利用ください。
ついでにリンクの貼られた画像(ここだとサムネイルたち)をマウスオーバーしたときに、何かアクションが欲しいけど、画像作るまでも

サンプル

基本ver.

サンプル画像

サムネイル サムネイル サムネイル

アニメーションありver.

サンプル画像

サムネイル サムネイル サムネイル


Javascript

	//基本ver.
	$(function(){
		$(".panel:not(:first)").hide();
		$("#tabs a").click(function() {
			$(".panel").hide();
			$(".panel").filter(this.hash).show();
			$("#tabs a").removeClass("selected");
			$(this).addClass("selected");
			return false;
			}).filter(":first").click();
	});
	
	//アニメーションありver.
	$(function(){
		$("#thumb02 a").click(function(){
			var thumbSrc = $(this).attr("href")
			$("#main02 img").fadeTo("slow", 0.1 ,function() {
			$(this).attr("src",thumbSrc).fadeTo("normal",1);
			});
		return false;
		});
	});

HTML

	<ul id="tabs">
	<li><a href="#tab01">タブ1</a></li>
	<li><a href="#tab02">タブ2</a></li>
	<li><a href="#tab03">タブ3</a></li>
	</ul>
	
	<div id="tab01" class="panel">内容1です。jQueryってとっても便利ですよね。簡単にいろんな動きが実装できるし、クロスブラウザにもなるし。ほんとうに素晴らしいです。</div>
	<div id="tab02" class="panel">内容2です。簡単なコードなら、自分で書けるようになるとより便利です。CSSのセレクタを利用するので、コーダーやWebデザイナーにもやさしいです。</div>
	<div id="tab03" class="panel">内容3です。最近は、jQuery Mobileも登場していますね。ある程度カスタマイズもできるので、時間がないときは利用すると、すばやくスマートフォン用のサイトが作れます。でも、フルカスタマイズするとなると、1から作ったほうが早い場合もあるようなので、使いどころを見極めることが重要です。</div>

一番ベーシックなjQueryプラグイン用のlighboxを利用しています。指定のJSとCSSと画像を読み込んでください。
他にもいろいろおしゃれな感じのものとかありますので、プラグインをお探しの際はこちらのページを参考にしてください。

サンプル

Javascript

	$(function() {
		$('#gallery a').lightBox();
	});

【補足】
$('#gallery a')の部分は、それぞれの環境に応じて変更可能です。
例えばidではなく、a要素にclass="lightbox"を追記して、$('a.lightbox').lightBox(); と記述することもできます。

HTML

	<!--head内に記述-->
	<link href="css/jquery.lightbox-0.5.css" rel="stylesheet" type="text/css" media="all" />

	<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
	<script type="text/javascript" src="js/jquery.lightbox-0.5.min.js"></script>
	<script type="text/javascript">
	$(function() {
	$('#gallery a').lightBox();
	});
	</script>
	
	<!--コンテンツ部分-->
	<p id="gallery">
	<a href="images/main1.jpg" class="oc"><img src="images/thumb1.jpg" alt="サムネイル" /></a>
	<a href="images/main2.jpg" class="oc"><img src="images/thumb2.jpg" alt="サムネイル" /></a>
	<a href="images/main3.jpg" class="oc"><img src="images/thumb3.jpg" alt="サムネイル" /></a>
	</p>

画像について

画像を拡大したときに使われるcloseボタンなどの画像は、imagesフォルダ内の「lightbox・・」から始まるファイルになりますので、そちらも忘れずに追加してください。
注意点としては、lightboxの本体JSファイルには、画像のパス指定が「images/・・・」と書かれています。画像がimagesフォルダ内直下でない場合は、jquery.lightbox-0.5.min.js内のパス指定を書き換えてください。('images/' で検索すると漏れなく書き換えられます)

画像などのコンテンツを並べたパネルを左右にスライドさせて切り替えるUIです。このサンプルは、西畑一馬さんのコードをコピペしています。

サンプル

前へ

次へ

Javascript

横幅を変えたいときは、数字(サンプルだと470)を書き換えてください。(CSSも)

	$(function(){
		$("#carouselInner").css("width",470*$("#carouselInner ul.column").size()+"px");
			$("#carouselInner ul.column:last").prependTo("#carouselInner");
			$("#carouselInner").css("margin-left","-470px");
			$("#carouselPrev").click(function(){
				$("#carouselNext,#carouselPrev").hide();
				$("#carouselInner").animate({
				marginLeft : parseInt($("#carouselInner").css("margin-left"))+470+"px"
				},"normal","swing" , 
				function(){
				$("#carouselInner").css("margin-left","-470px");
				$("#carouselInner ul.column:last").prependTo("#carouselInner");
				$("#carouselNext,#carouselPrev").show();
				});
			});
			$("#carouselNext").click(function(){
			$("#carouselNext,#carouselPrev").hide();
			$("#carouselInner").animate({
				marginLeft : parseInt($("#carouselInner").css("margin-left"))-470+"px"
				},"normal","swing" , 
				function(){
				$("#carouselInner").css("margin-left","-470px");
				$("#carouselInner ul.column:first").appendTo("#carouselInner");
				$("#carouselNext,#carouselPrev").show();
			});
		});
	});

HTML

	<div id="carouselWrap">
		<p id="carouselPrev"><img src="images/btn_prev.png" alt="前へ" /></p>
		<p id="carouselNext"><img src="images/btn_next.png" alt="次へ" /></p>
		<div id="carouse">
			<div id="carouselInner">
				<ul class="column">
				<li><a href="#"><img src="images/photo1_thum.jpg" alt="" /></a></li>
				<li><a href="#"><img src="images/photo2_thum.jpg" alt="" /></a></li>
				<li><a href="#"><img src="images/photo3_thum.jpg" alt="" /></a></li>
				</ul>
				<ul class="column">
				<li><a href="#"><img src="./images/photo4_thum.jpg" alt="" /></a></li>
				<li><a href="#"><img src="./images/photo5_thum.jpg" alt="" /></a></li>
				<li><a href="#"><img src="./images/photo6_thum.jpg" alt="" /></a></li>
				</ul>
				<ul class="column">
				<li><a href="#"><img src="./images/photo7_thum.jpg" alt="" /></a></li>
				<li><a href="#"><img src="./images/photo8_thum.jpg" alt="" /></a></li>
				<li><a href="#"><img src="./images/photo9_thum.jpg" alt="" /></a></li>
				</ul>
			</div>
		</div>
	</div>

CSS

横幅や矢印の位置、はみ出す部分を非表示にするなど制御しています。#carouselWrapの横幅を変えたら、JSで指定している数字の部分も書き換えてください。(サンプルだと470pxです)

	#carouselWrap{
		margin:10px auto;
		width:470px;
		height:135px;
		padding:5px;
		border:1px solid #DBDBDB;
		position:relative;
	}
	#carouselPrev{
		position:absolute;
		top:65px;
		left:-13px;
		cursor:pointer;
	}
	#carouselNext{
		position:absolute;
		top:65px;
		right:-13px;
		cursor:pointer;
	}
	#carouse{
		width:100%;
		height:100%;
		overflow:hidden;
	}
	#carouselInner ul.column{
		width:455px;
		height:105px;
		padding:15px 0 15px 15px;
		list-style-type:none;
		float:left;
	}
	#carouselInner ul.column li{
		float:left;
		margin-right:10px;   
		display:inline; 
	}
	#carouselInner ul.column li img{
		border:none;
	}

おまけ:ある程度スクロールしたら、ページの先頭へ戻るボタンを表示させる方法

最初は非表示ですが、ある程度スクロールすると、右下に矢印が現れます。固定させているので、常に同じ位置にあるので分かりやすく、ユーザービリティ的にもよいかと思います。

サンプル

今も右下にでていますよね、それです!

Javascript

	$(document).ready(function(){
		$("#back-top").hide();
			$(function () {
			$(window).scroll(function () {
			if ($(this).scrollTop() > 100) {
				$('#back-top').fadeIn();
				} else {
				$('#back-top').fadeOut();
				}
			});
			// scroll body to 0px on click
			$('#back-top a').click(function () {
				$('body,html').animate({
				scrollTop: 0
				}, 800);
				return false;
			});
		});
	});

HTML

サンプルでは矢印は画像なんですが、背景の角丸はCSS3で実装しています。まあ、全部画像でもいいんですが、なんとなくCSS3活用してみました。

	<p id="back-top">
	<a href="#top"><span><img src="images/arrow_top.png" alt="↑" width="22" height="29" /></span></a></p>

CSS

右下固定のポジションや角丸とか透明度とかをここでコントロールしてるので、長い・・。

	#back-top {
		position:fixed;
		bottom: 0;
		right: 0;
	}
	#back-top a {
		width: 50px;
		display: block;
		text-align: center;
		font: 11px/100% Arial, Helvetica, sans-serif;
		text-transform: uppercase;
		text-decoration: none;
		color: #bbb;
		/* transition */
		-webkit-transition: 1s;
		-moz-transition: 1s;
		transition: 1s;
	}
	#back-top a:hover {
		color: #000;
	}
	/* arrow icon (span tag) */
	#back-top span {
		width: 50px;
		height: 40px;
		display: block;
		margin-bottom: 7px;
		padding: 10px 0 0;
		background: rgba(195, 195, 195, 0.5) ;
		font-size: 20px;
		color:#000;
		/* rounded corners */
		-webkit-border-radius: 15px;
		-moz-border-radius: 15px;
		border-radius: 15px;
		/* transition */
		-webkit-transition: 1s;
		-moz-transition: 1s;
		transition: 1s;
	}
	#back-top a:hover span {
		background-color: #777;
	}

最後に一言

サンプルは、いろんなサイトを参考にストックしていたコードたちをまとめたものです。もっといい方法や書き方があるかもしれませんので、そのあたりはご了承ください。
また、サンプルで利用している写真はこちらからDLさせてもらってます。

↑