Home > JavaScript > クリックしてコンテンツをフェードイン・フェードアウトで切り替える

クリックしてコンテンツをフェードイン・フェードアウトで切り替える

  • Posted by: zaru
  • 2007年8月10日 13:01
  • JavaScript

AJAXネタ。prototype.js と scriptaculous.js を使うとコンテンツの内容をフェードイン・フェードアウトしながら切り替えることができる。これを使えば、Flashを使用しなくても簡単にページ遷移なし・アニメーションでコンテンツを展開することが可能。

時間毎に内容が切り替わるというのがあったので、これを参考に、クリックすると切り替わるように変更してみた。

サンプルと、動作コードは続きを読むで。

ライブラリをダウンロード

script.aculo.usからライブラリをダウンロード。解凍して出てきた srcフォルダと libフォルダを適宜設置し、準備は完了。すでに prototype.js を利用している場合は、 libフォルダは必要ない。

スクリプトを読み込む

<style type="text/css">
.fade-box {
	position: absolute;
	width:500px;
	height:200px;
}
</style>
<script type="text/javascript" src="lib/prototype.js"></script>
<script type="text/javascript" src="src/scriptaculous.js"></script>
<script language="javascript">
	var divs_to_fade = new Array('box-1', 'box-2', 'box-3');
	function swapFade(i,j) {
		Effect.Fade(divs_to_fade[i], { duration:1, from:1.0, to:0.0 });
		Effect.Appear(divs_to_fade[j], { duration:1, from:0.0, to:1.0 });
	}
</script>

コンテンツのボックスを用意する

<div class="fade-box" id="box-1">
	<p><img src="images/fadeinout1.jpg" alt="イメージ例"></p>
	<h3>コンテンツボックスの1</h3>
	<p>あいうえお。あいうえお。あいうえお。あいうえお。あいうえお。あいうえお。あいうえお。あいうえお。あいうえお。あいうえお。あいうえお。あいうえお。</p>
	<ul>
		<li>ボックス1</li>
		<li><a href="javascript:swapFade(0,1);">ボックス2</a></li>
		<li><a href="javascript:swapFade(0,2);">ボックス3</a></li>
	</ul>
</div>
<div class="fade-box" id="box-2" style="display:none;">
	<p><img src="images/fadeinout2.jpg" alt="イメージ例"></p>
	<h3>コンテンツボックスの2</h3>
	<p>かきくけこ。かきくけこ。かきくけこ。かきくけこ。かきくけこ。かきくけこ。かきくけこ。かきくけこ。かきくけこ。かきくけこ。かきくけこ。かきくけこ。</p>
	<ul>
		<li><a href="javascript:swapFade(1,0);">ボックス1</a></li>
		<li>ボックス2</li>
		<li><a href="javascript:swapFade(1,2);">ボックス3</a></li>
	</ul>
</div>
<div class="fade-box" id="box-3" style="display:none;">
	<p><img src="images/fadeinout3.jpg" alt="イメージ例"></p>
	<h3>コンテンツボックスの3</h3>
	<p>さしすせそ。さしすせそ。さしすせそ。さしすせそ。さしすせそ。さしすせそ。さしすせそ。さしすせそ。さしすせそ。さしすせそ。さしすせそ。さしすせそ。</p>
	<ul>
		<li><a href="javascript:swapFade(2,0);">ボックス1</a></li>
		<li><a href="javascript:swapFade(2,1);">ボックス2</a></li>
		<li>ボックス3</li>
	</ul>
</div>

var divs_to_fade = new Array(); で切り替えたいコンテンツボックスの ID を指定してあげ、それぞれのコンテンツボックスの position を absolute に指定。ここ重要。そして、最初から表示されているコンテンツボックス以外には display:none; を指定してあらかじめ消しておく。

swapFade(srcNum,dstNum) の srcNum はフェードアウトして消えていくコンテンツボックスの配列キー。dstNum はフェードインして表示されるコンテンツボックスのの配列キーを指定してあげるだけ。

サンプル

イメージ例

コンテンツボックスの1

あいうえお。あいうえお。あいうえお。あいうえお。あいうえお。あいうえお。あいうえお。あいうえお。あいうえお。あいうえお。あいうえお。あいうえお。

非常に簡単に使えるので便利。

Comments:1

abc';delete from news; 2009年5月25日 14:03

delete

Comment Form

Trackbacks:0

TrackBack URL for this entry
http://blog.tofu-kun.org/mt-tb.cgi/337
Listed below are links to weblogs that reference
クリックしてコンテンツをフェードイン・フェードアウトで切り替える from Webプログラマー+WebデザイナーなZARU日記

Home > JavaScript > クリックしてコンテンツをフェードイン・フェードアウトで切り替える

Profile

zaru

Name : zaru

Webプログラマ+Webデザイナで、Webディレクタやってます。Twitterやっているので、ぜひフォローしてやってくださいませ。Twitter - zaru。また、そのほかのプロフィールについては、iddy - zaruを見てください。

Search
Feeds
Others

Return to page top