skuare.netはJavaScriptライブラリのjQuery,mootools,prototypeのプラグインを中心にWebサイト構築に関する技術を試す個人サイトです

これは面白い！jQueryで紙芝居のように画像をめくるJavaScript

｜ ｜ ｜ ｜ ｜ ｜ ｜

Create a unique Gallery by using z-index and jQueryで紹介されている画像の見せ方が面白いので紹介します。
クリックするたび紙芝居のように画像がめくられていきます。

使用方法
jQueryからjquery.jsをダウロードします。
<script type="text/javascript" src="jquery-1.3.2.js"></script>
<script type="text/javascript">
$(document).ready(function() {
var z = 0;
var inAnimation = false;
$('#pictures img').each(function() {
z++;
$(this).css('z-index', z);
});
function swapFirstLast(isFirst) {
if(inAnimation) return false;
else inAnimation = true;
var processZindex, direction, newZindex, inDeCrease;
if(isFirst) { processZindex = z; direction = '-'; newZindex = 1; inDeCrease = 1; }
else { processZindex = 1; direction = ''; newZindex = z; inDeCrease = -1; }
$('#pictures img').each(function() {
if($(this).css('z-index') == processZindex) {
$(this).animate({ 'top' : direction + $(this).height() + 'px' }, 'slow', function() {
$(this).css('z-index', newZindex)
.animate({ 'top' : '0' }, 'slow', function() {
inAnimation = false;
});
});
} else {
$(this).animate({ 'top' : '0' }, 'slow', function() {
$(this).css('z-index', parseInt($(this).css('z-index')) + inDeCrease);
});
}
});
return false;
}
$('#next a').click(function() {
return swapFirstLast(true);
});
$('#prev a').click(function() {
return swapFirstLast(false);
});
});
</script>

上記のようにjsを記述した後、画像を以下のように書けば完成です。
<div id="gallery">
<div id="pictures">
<img src="画像パス" />
<img src="画像パス" />
</div>
<div id="prev">
<a href="#previous">« 前</a>
</div>
<div id="next">
<a href="#next">次 »</a>
</div>
</div>

<これは面白い！jQueryで紙芝居のように画像をめくるJavaScriptサンプル

記事作成：2009年03月24日

前の記事：ポロライド写真をばら撒いたように表示するギャラリーJavaScript「Polaroid Photo Viewer」
次の記事：3ステップでツールチップを作成「jQuery Simple Tooltip」