29分でできる！ あのサイトの“技”を盗め ― 第15回
懐かしの“マーキー”をjQueryでちょいオシャレに！
2009年02月23日 08時00分更新
■完成したHTMLファイル
★：の部分は取得したGoogle Maps APIキーを入れてください。
<!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/liscroll.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/jquery.li-scroller.1.0.js"></script>
<script type="text/javascript" src="js/marquee.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">
<a href="#" id="openlist">最新記事</a>
<ul id="newslist">
<li><span>新宿／岐阜屋の情報を追加しました (09/01/30)</span></li>
<li><span>飯田橋／メリメロの情報を追加しました (08/12/30)</span></li>
<li><span>新宿／ハーブス ルミネエスト新宿店の情報を追加しました (08/11/01)</span></li>
<li><span>代々木／ザッツ・バーガー・カフェ代々木店の情報を追加しました (08/09/01)</span></li>
<li><span>池袋／ZOZOIの情報を追加しました (08/07/01)</span></li>
</ul>
</div>
<div id="text">
<img src="photo/001.jpg" width="320" height="230" alt="ギョウザ" align="left">
<h3>『岐阜屋』<br>飲んだ後、お腹がすいているときに</h3>
<p> 西口・思い出横丁の中華屋さん。ラーメン、餃子、チャーハン、キクラゲ炒め、ほか何でも安くてうまい。水餃子がおススメだけど、写真の焼き餃子もパリッとしていて美味しかった。</p><br clear="left">
</div>
<div id="information">
<table align="left" width="250">
<tr><th>ジャンル</th><td>中華</td></tr>
<tr><th>店名</th><td>岐阜屋</td></tr>
<tr><th>住所</th><td>新宿区西新宿1-2-1</td></tr>
<tr><th>最寄駅</th><td>JR新宿駅</td></tr>
<tr><th>電話</th><td>03-3342-6858</td></tr>
<tr><th>営業時間</th><td>9:00～1:00</td></tr>
<tr><th>備考</th><td>思い出横丁。松屋の脇を入ってすぐ</td></tr>
</table>
<img src="http://maps.google.com/staticmap?¢er=35.693252,139.699608&markers=35.693275641218925,139.6995708346367,red&zoom=17&size=300x300&key=★">
<br clear="left">
</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>
■完成したmarquee.jsファイル
$(function(){
$("#newslist").clone().attr("id", "newslist2").insertAfter("#openlist").hide();
$("#newslist").liScroll({travelocity: 0.04});
$("#openlist").toggle(
function(){
$("#newslist").hide();
$("#newslist2").show();
$(".tickercontainer").hide();
},function(){
$("#newslist").show();
$("#newslist2").hide();
$(".tickercontainer").show();
}
);
});
■完成したliscroll.cssファイル
/* liScroll style declarations */
.tickercontainer { /* the outer div with the black border */
width: 580px;
margin: 0;
padding: 0;
overflow:hidden;
}
.tickercontainer .mask { /* that serves as a mask. so you get a sort of padding both left and right */
position: relative;
left: 0px;
top: 0px;
width: 580px;
overflow: hidden;
}
ul.newsticker { /* that's your list */
position: relative;
left: 580px;
list-style-type: none;
margin: 0;
padding: 0;
}
ul.newsticker li {
float: left; /* important: display inline gives incorrect results when you check for elem's width */
margin: 0;
padding: 0;
}
ul.newsticker span {
margin: 0 40px 0 0;
}
この連載の記事
- 第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でびゅんびゅんスライド！ページ切換法
- この連載の一覧へ
