[JS]オーバーレイを使って、付加情報をかっこよく見せるjQueryのチュートリアル
Post on:2010年10月18日
sponsors
オーバーレイを使って、付加情報をアニメーションでかっこよく見せるjQueryのチュートリアルを紹介します。
jQueryといえば、先週末に1.4.3にバージョンアップしましたね。
Annotation Overlay Effect with jQuery
デモページ
[ad#ad-2]
実装
HTML
HTMLはクリーンでシンプルです。元画像（image_wrap）とオーバーレイ画像（zoom_overlay）をdiv要素で内包します。
|
1 2 3 4 5 6 7 8 9 10 11 |
<div class="portfolio"> <div class="portfolio_item"> <div class="image_wrap"> <img src="images/website1.jpg" alt="Website1"/> </div> <div class="zoom_overlay"> <img src="images/website1_notes.png" alt="Website1Notes"/> </div> </div> ... </div> |
[ad#ad-2]
CSS
イメージの幅をアニメーションさせるため、オーバーレイのスタイルはサイズを異なるものにします、元：500px、オーバーレイ：400pxにしています。また、アニメーション用に「.image_wrap > img」に「margin:auto;」を指定するのもポイントです。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 |
.portfolio{ width:500px; margin:0 auto; position:relative; } .portfolio_item{ position:relative; margin:30px auto; } .image_wrap{ width:500px; height:500px; display:table-cell; text-align:center; vertical-align:middle; position:relative; cursor:pointer; } .image_wrap > img{ vertical-align:middle; margin:0 auto; position:relative; -moz-box-shadow:1px 1px 7px #000; -webkit-box-shadow:1px 1px 7px #000; box-shadow:1px 1px 7px #000; } .zoom_overlay{ width:400px; height:400px; margin:-200px 0px 0px -200px; background:transparent url(../images/overlay.png) repeat top left; position:absolute; top:50%; left:50%; display:none; opacity:0; -moz-border-radius:10px; -webkit-border-radius:10px; border-radius:10px; cursor:pointer; filter:progid:DXImageTransform.Microsoft.Alpha(opacity=0); } .zoom_overlay img{ display:none; } |
JavaScript
エフェクトは元画像を小さくして、その上にオーバーレイの付加情報をアニメーションで表示するというものです。
実装にはjquery.jsを外部ファイルとし、以下のスクリプトを記述します。
まずは、元画像のクリック時を定義します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
$(function() { var $portfolio = $('#portfolio'); $portfolio.find('.image_wrap').bind('click',function(){ var $elem = $(this); var $image = $elem.find('img:first'); $image.stop(true) .animate({ 'width' :'400px', 'height':'400px' },250); //the overlay is the next element var opacity = '1'; if($.browser.msie) opacity = '0.5' $elem.next() .stop(true) .animate({ 'width' :'500px', 'height' :'500px', 'marginTop' :'-250px', 'marginLeft':'-250px', 'opacity' :opacity },250,function(){ //fade in the annotations $(this).find('img').fadeIn(); }); }); |
最後に、オーバーレイのクリック時を定義します。
オーバーレイの付加情報を消し、元画像のサイズを戻します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
$portfolio.find('.zoom_overlay').bind('click',function(){ var $elem = $(this); var $image = $elem.prev() .find('img:first'); //hide overlay $elem.find('img') .hide() .end() .stop(true) .animate({ 'width' :'400px', 'height' :'400px', 'marginTop' :'-200px', 'marginLeft':'-200px', 'opacity' :'0' },125,function(){ //hide overlay $(this).hide(); }); //show image $image.stop(true) .animate({ 'width' :'500px', 'height':'500px' },250); }); }); |
sponsors
