29分でできる！ あのサイトの“技”を盗め ― 第16回
jQueryアニメ＆エフェクト合わせ技で画像を拡大
2009年03月02日 06時00分更新
■完成したHTMLファイル
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html lang="ja">
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<meta http-equiv="content-script-type" content="text/javascript">
<meta http-equiv="content-style-type" content="text/css">
<meta name="generator" content="手入力でござる">
<link rel="stylesheet" href="css/init.css" type="text/css" media="all">
<link rel="stylesheet" href="css/main.css" type="text/css" media="all">
<script type="text/javascript" src="js/jquery-1.3.1.min.js"></script>
<script type="text/javascript" src="js/imagescale.js"></script>
<title>東京食べ歩きガイド</title>
</head>
<body>
<div id="content">
<h1>東京食べ歩きガイド</h1>
<div id="menu">
<a href="youshoku/index.html" id="menu1">[洋食]</a>
<a href="washoku/index.html" id="menu2">[和食]</a>
<a href="chuka/index.html" id="menu3">[中華]</a>
<a href="sweets/index.html" id="menu4">[スイーツ]</a>
</div>
<div id="whatsnew">
<h4>最新記事</h4>
<ul id="newslist">
<li>新宿／岐阜屋の情報を追加しました (09/01/30)</li>
</ul>
</div>
<div id="youshoku" class="category">
<h2>洋食</h2>
<div class="food">
<img src="photo/shop1.jpg" width="60" height="40" align="left" alt="メリメロ">
メリメロ<br>
千代田区飯田橋4-5-4 第3山和ビル101<br>
<div class="info">
飯田橋から少し離れたところにあるフランス田舎料理のお店。オーガニック野菜や天然魚にこだわり。自家製のふかふかフォカッチャも◎。かわいいお店。<br>
<a href="shop1/description.html">＞＞詳細</a>
</div>
<br clear="left">
</div>
<div class="food">
<img src="photo/shop2.jpg" width="60" height="40" align="left" alt="ハーブス">
ハーブス ルミネエスト新宿店<br>
新宿区新宿3-38-1 ルミネエスト新宿B2F<br>
<div class="info">
ルミネ地下にあるデッカイケーキが有名なお店。休日はいつも大行列。店内ではパスタセットも食べられるので、食事＆甘いもの食べたいときに。<br>
<a href="shop2/description.html">＞＞詳細</a>
</div>
<br clear="left">
</div>
<div class="food">
<img src="photo/shop3.jpg" width="60" height="40" align="left" alt="ザッツ･バーガー">
ザッツ・バーガー・カフェ代々木店<br>
渋谷区千駄ヶ谷5-18-1<br>
<div class="info">
ちょっと前に流行った佐世保バーガーの店。代々木駅ほど近く、ドコモビルのそば。少し時間がかかるけど肉が焼けるところを見ながら待つのが楽しみ。<br>
<a href="shop3/description.html">＞＞詳細</a>
</div>
<br clear="left">
</div>
<div class="food">
<img src="photo/shop4.jpg" width="60" height="40" align="left" alt="ZOZOI">
ZOZOI<br>
豊島区西池袋3-22-6<br>
<div class="info">
西口・立教大学近くの小さな公園の前にあるこじゃれたカフェ。もともと池袋にはあんまりない、落ち着いた雰囲気。優雅な休日のランチに。<br>
<a href="shop4/description.html">＞＞詳細</a>
</div>
<br clear="left">
</div>
</div>
<div id="footer">
<div id="copyright"><img src="../shared/images/copyright.gif" width="170" height="7" alt="COPYRIGHT 2009 TOKYO TABEARUKI GUIDE"></div>
<a href="#" id="about">ABOUT</a>
<a href="#" id="contact">CONTACT</a>
</div>
</div>
</body>
</html>
■完成したimagescale.jsファイル
$(function(){
$(".info").fadeOut(0.1);
$(".food img").toggle(function(){
$(this).animate({
width : 180,
height : 120
},
500,null,
function(){
$(this).parent().find(".info").fadeIn(500);
});
},function(){
$(this).parent().find(".info").fadeOut(200,
function(){
$(this).parent().find("img").animate({
width : 60,
height : 40
}, 200);
}
);
});
});
この連載の記事
- 第26回 普通のtableタグを1行で動く表にするJSライブラリ
- 第25回 Googleマップ＋jQueryで作るAjaxなデザイン
- 第24回 英国の映像作家も使うJS製LavaLampメニュー
- 第23回 jQueryでクールなくるくるウィジェットを作ろう
- 第22回 Amazonと楽天のアフィリエイトを効率化するjQuery技
- 第21回 意外性が心地よいJSメニューのWebデザイン
- 第20回 jQueryで作るAmazon流リキッドレイアウト
- 第19回 Yahoo！の流れるパネルをJSライブラリで再現
- 第18回 あのFlashサイトのUIをjQueryで作る
- 第17回 JavaScriptでびゅんびゅんスライド！ページ切換法
- この連載の一覧へ
