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

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

｜ ｜ ｜ ｜ ｜ ｜ ｜

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

使用方法
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>

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

記事作成：2009年05月14日

前の記事：jQueryベースのLightBox風ギャラリー「jQuery BigPicture」
次の記事：JavaScriptでフォームの入力項目をリアルタイムでチェックする「jQuery Form Validators」