JavaScriptライブラリjQueryで、ちらみせエフェクト

過去2度、ちらみせJavaScriptを紹介しましたが、もっと簡単に実現してみましょう。
JavaScriptライブラリjQueryを使用したサンプルです。
via:Simple Page Peel Effect with jQuery & CSS

sponsors

使用方法

jQueryからjquery.jsをダウロードします。
また、めくる感じの画像を用意します。
こんな感じです。

これを以下あのように記述します。

<div id="pageflip">
	<img src="page_flip.png" />
	<div class="msg_block"></div> //ちらりと見せる要素
</div>
ちらりと見せる要素を後ろに置くためCSSで背景画像を指定します。

<style type="text/css">
img {border:none;}
#pageflip {position: absolute;right: 0; top: 0;} //右上にくっつけます
#pageflip .msg_block {width: 50px; height: 50px;overflow: hidden;
position: absolute;right: 0; top: 0;
background: url(画像パス) no-repeat right top;}
// ちらりと見せる要素に背景画像を指定
#pageflip img {width: 50px; height: 52px;
z-index: 99;position: absolute;right: 0; top: 0;}
// ちらみせ要素の上にめくる画像がくるようにz-indexの数値を指定
</style>
最後に以下のようにJavaScriptを記述します。

<script type="text/javascript" src="jquery-1.3.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
	$("#pageflip").hover( //#pageflipにマウスオーバーしたら
		function() {
			$("#pageflip img , .msg_block").stop()  
				.animate({width: '307px', height: '319px'}, 500);} , //要素を動かします
		function() { //マウスアウトしたら
			$("#pageflip img").stop()
				.animate({width: '50px', height: '52px'}, 220); //もとの大きさに戻します。
			$(".msg_block").stop()
				.animate({width: '50px' height: '50px'}, 200);
	});
});
</script>

サンプル

右上にあるやつです。
fr
Javascriptサンプルページ一覧
skuare.net