[JS]パネルが次々にスライドして重なるエフェクトを実装するチュートリアル

Post on:2010年11月22日

パネルをクリックすると、次々にパネルがスライドして重なり順が変わるエフェクトを実装するjQueryのチュートリアルを紹介します。

サイトのキャプチャ

Opera mobile window chooser, recreated with jQuery
デモページ

[ad#ad-2]

このエフェクトはOpera Mobileの「window chooser」を模したものらしいです（持ってないから分からないです）。

HTMLはリスト要素で実装されており、非常にシンプルです。

HTML

最小限の要素にした例です。
最初に一番上にするパネルに「current」を与えます。

<ul id="container">
	<li class="current">最初に表示するパネル</li>
	<li>パネル2</li>
	<li>パネル3</li>
	<li>パネル4</li>
</ul>

HTML

デモでは、パネル内のコンテンツにリンク要素を配置しています。

<ul id="container">
	<li class="current"><p>This element is on the top by default</p></li>
	<li><p>Go to<br /><a href="http://www.jankoatwarpspeed.com">Warp Speed</a> blog</p></li>
	<li><p>Go to<br /><a href="http://www.jquery.com">jQuery</a></p></li>
	<li><p>Go to<br /><a href="http://www.opera.com/mobile/">Opera Mobile</a></p></li>
</ul>

[ad#ad-2]

JavaScript

スクリプトは「jquery.js」を外部ファイルとして、下記のスクリプトを記述します。
半分隠れたパネルのリンクの処理には「e.preventDefault();」を使用しています。



$(document).ready(function() {

	var itemWidth = $("#container li").width();

	// hide 50% of each window

	var itemPosition = itemWidth * 50 / 100;

	// slide each window 60% if its width

	var itemMove = itemWidth * 60 / 100;


	// move windows below eachother

	$("#container li").each(function(i) {

		$(this).attr("id", i).css("z-index", 100 - i).css("left", itemPosition * i);

	});


	$("#container li").click(function(e) {

		var currentID = parseInt($(".current").attr("id"));

		var clickedID = parseInt($(this).attr("id"));


		if (currentID != clickedID) {

			e.preventDefault();

			var currentZ = 99;

			var current = $(this);

			setTimeout(function() { $(".current").removeClass("current"); current.css("z-index", currentZ).addClass("current"); }, 500);


			if (clickedID > currentID) {

				var i = 1;

				var total = clickedID - currentID + 1;

				for (j = clickedID - 1; j >= 0; j = j - 1) {

					$("#" + j).animate({ "left": "-=" + itemMove * (i) + "px" }, 500);

					$("#" + j).animate({ "left": "+=" + itemMove * (i) + "px" }, 300);

					i = i + 1;

				}

				var i = 1;

				setTimeout(function() {

					for (j = clickedID - 1; j >= 0; j = j - 1) {

						$("#" + j).css("z-index", total - i);

						i = i + 1;

					}

				}, 500);

			}

			else {

				var i = 1;

				var total = $("#container li").length;

				for (j = clickedID + 1; j <= total; j = j + 1) {
					$("#" + j).animate({ "left": "+=" + itemMove * i + "px" }, 500);
					$("#" + j).animate({ "left": "-=" + itemMove * i + "px" }, 300);
					$("#" + j).css("z-index", currentZ - i);
					i = i + 1;
				}
			}
		}
	});
});
[/javascript]




CSS


スタイルシートはbox-shadowなどCSS3でスタイルを行っています。


#container { width:960px; margin:0px auto; position:relative; list-style:none;}
#container li { width:150px; height:100px; position:absolute; top:0; left:0; 
	text-align:center; border:solid 1px #aaa; cursor:pointer;
	-moz-box-shadow: 0px 0px 3px #888; -webkit-box-shadow: 0px 0px 3px #888; box-shadow: 0px 0px 3px #888;
	-moz-border-radius:5px; -webkit-border-radius:5px; border-radius:5px;
	background:#e0e0e0 url(bkg.png) repeat-x scroll left top;}
#container li a { color:#222; text-decoration:none;}
#container li.current { border:solid 1px #888; background:#f0f0f0 url(bkg-current.png) repeat-x scroll left top; cursor:default;}
#container li.current a { color:#0010a9; text-decoration:underline;}









sponsors



























	

	

	

	





top of page




























©2024 coliss