実行結果
設置サンプルのソース
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="ja" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="imagetoolbar" content="no" />
<title>設置サンプル</title>
<link rel="stylesheet" type="text/css" href="/content/lib/global.css" />
<!-- JS -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="/content/lib/jquery/jquery.spy-effect.js"></script>
<script type="text/javascript">
$(function() {
$('ul.spy').simpleSpy();
});
</script>
<!-- CSS -->
<link rel="stylesheet" type="text/css" href="/content/lib/jquery/jScrollPane.css" />
<style type="text/css">
#sidebar { color:#afb0b1; background:#0d171a; margin:0 0 24px; padding:15px 10px 10px; width:400px; }
#sidebar ul { list-style-type:none; margin:0; padding:0; }
#sidebar li { height:75px; overflow:hidden; font-size:11px; position:relative; margin:0; }
#sidebar h5 { color:#ff6699; font-size:1em; margin-bottom:.5em; }
#sidebar h5 a { color:#ff6699; text-decoration:none; }
#sidebar p { margin:0; padding:0; }
#sidebar img { float:left; margin:0 10px 0 0; }
#sidebar .info { color:#ccc; font-size:.9em;}
#sidebar .spyWrapper { height:100%; overflow:hidden; position:relative; }
#sidebar { -webkit-border-radius:10px; -moz-border-radius:10px; }
/* rating */
#sidebar div.rating { background-image:url(/content/img/ajax/info_bar_stars.png); width:72px; height:12px; position:absolute; bottom:0; right:10px; }
.none { background-position:0 0!important; }
.one { background-position:0 -12px!important; }
.two { background-position:0 -24px!important; }
.three { background-position:0 -36px!important; }
.four { background-position:0 -48px!important; }
.five { background-position:0 -60px!important; }
</style>
<link rel="stylesheet" type="text/css" href="/common/css/example.css"></head>
<body id='example3' class='example'><div class="ads" style="margin:32px auto;text-align:center;"></div><h1 class='h'><a href='/'>PHP & JavaScript Room</a> :: 設置サンプル</h1>
<h3 class='h'>実行結果</h3>
<div id="wrapper">
<h1>設置サンプル</h1>
<p>参照： <a href='http://jqueryfordesigners.com/simple-jquery-spy-effect/'>Simple jQuery Spy Effect</a></p>
<p>▼要素が自動的にスクロールします。</p>
<!-- CODE -->
<div id="sidebar" class="cf">
<ul class="spy">
<li>
<a href="http://www.flickr.com/photos/22559849@N06/3274514408/" title="アボカド シーザーサラダ@アボガドダイニング Platinum Lounge by php_javascript_room, on Flickr"><img src="http://farm4.static.flickr.com/3514/3274514408_1800118ded_t.jpg" width="100" height="75" alt="アボカド シーザーサラダ@アボガドダイニング Platinum Lounge" /></a>
<h5><a href="http://www.flickr.com/photos/22559849@N06/3274514408/" title="アボカド シーザーサラダ">アボカド シーザーサラダ</a></h5>
<p class="info">@アボガドダイニング Platinum Lounge</p>
<div class="rating none"></div>
</li>
<li>
<a href="http://www.flickr.com/photos/22559849@N06/3273696567/" title="アボカド刺@アボガドダイニング Platinum Lounge by php_javascript_room, on Flickr"><img src="http://farm4.static.flickr.com/3509/3273696567_ebf4ed4381_t.jpg" width="100" height="75" alt="アボカド刺@アボガドダイニング Platinum Lounge" /></a>
<h5><a href="http://www.flickr.com/photos/22559849@N06/3273696567/" title="アボカド刺">アボカド刺</a></h5>
<p class="info">@アボガドダイニング Platinum Lounge</p>
<div class="rating one"></div>
</li>
<li>
<a href="http://www.flickr.com/photos/22559849@N06/3273696493/" title="ハニートースト@アボガドダイニング Platinum Lounge by php_javascript_room, on Flickr"><img src="http://farm4.static.flickr.com/3316/3273696493_570fdd0ee5_t.jpg" width="100" height="75" alt="ハニートースト@アボガドダイニング Platinum Lounge" /></a>
<h5><a href="http://www.flickr.com/photos/22559849@N06/3273696493/" title="ハニートースト">ハニートースト</a></h5>
<p class="info">@アボガドダイニング Platinum Lounge</p>
<div class="rating two"></div>
</li>
<li>
<a href="http://www.flickr.com/photos/22559849@N06/3274514302/" title="アボカドディップ@アボガドダイニング Platinum Lounge by php_javascript_room, on Flickr"><img src="http://farm4.static.flickr.com/3396/3274514302_10521a0a98_t.jpg" width="100" height="75" alt="アボカドディップ@アボガドダイニング Platinum Lounge" /></a>
<h5><a href="http://www.flickr.com/photos/22559849@N06/3274514302/" title="フライドポテト アボカドディップ添え">フライドポテト アボカドディップ添え</a></h5>
<p class="info">@アボガドダイニング Platinum Lounge</p>
<div class="rating three"></div>
</li>
<li>
<a href="http://www.flickr.com/photos/22559849@N06/3273696469/" title="ベーコンとアボカドのピザ（トマトソース）@アボガドダイニング Platinum Lounge by php_javascript_room, on Flickr"><img src="http://farm4.static.flickr.com/3427/3273696469_aa2aaf5e89_t.jpg" width="100" height="75" alt="ベーコンとアボカドのピザ（トマトソース）@アボガドダイニング Platinum Lounge" /></a>
<h5><a href="http://www.flickr.com/photos/22559849@N06/3273696469/" title="ベーコンとアボカドのピザ">ベーコンとアボカドのピザ</a></h5>
<p class="info">@アボガドダイニング Platinum Lounge</p>
<div class="rating three"></div>
</li>
<li>
<a href="http://www.flickr.com/photos/22559849@N06/3141927210/" title="白子の昆布焼き@高庵 by php_javascript_room, on Flickr"><img src="http://farm4.static.flickr.com/3197/3141927210_be00d22544_t.jpg" width="100" height="75" alt="白子の昆布焼き@高庵" /></a>
<h5><a href="http://www.flickr.com/photos/22559849@N06/3141927210/" title="白子の昆布焼き">白子の昆布焼き</a></h5>
<p class="info">@高庵</p>
<div class="rating four"></div>
</li>
<li>
<a href="http://www.flickr.com/photos/22559849@N06/3141927120/" title="ササミ焼わさびマヨネーズ@高庵 by php_javascript_room, on Flickr"><img src="http://farm4.static.flickr.com/3284/3141927120_d66a9a0304_t.jpg" width="100" height="75" alt="ササミ焼わさびマヨネーズ@高庵" /></a>
<h5><a href="http://www.flickr.com/photos/22559849@N06/3141927120/" title="ササミ焼わさびマヨネーズ">ササミ焼わさびマヨネーズ</a></h5>
<p class="info">@高庵</p>
<div class="rating five"></div>
</li>
<li>
<a href="http://www.flickr.com/photos/22559849@N06/3141100545/" title="白レバー串みそ焼き@高庵 by php_javascript_room, on Flickr"><img src="http://farm4.static.flickr.com/3215/3141100545_e21269fb11_t.jpg" width="100" height="75" alt="白レバー串みそ焼き@高庵" /></a>
<h5><a href="http://www.flickr.com/photos/22559849@N06/3141100545/" title="白レバー串みそ焼き">白レバー串みそ焼き</a></h5>
<p class="info">@高庵</p>
<div class="rating none"></div>
</li>
<li>
<a href="http://www.flickr.com/photos/22559849@N06/3141926720/" title="屋台風羽根つき焼きラーメン@高庵 by php_javascript_room, on Flickr"><img src="http://farm4.static.flickr.com/3247/3141926720_08ebc48824_t.jpg" width="100" height="75" alt="屋台風羽根つき焼きラーメン@高庵" /></a>
<h5><a href="http://www.flickr.com/photos/22559849@N06/3141926720/" title="屋台風羽根つき焼きラーメン">屋台風羽根つき焼きラーメン</a></h5>
<p class="info">@高庵</p>
<div class="rating two"></div>
</li>
</ul>
</div>
<!-- / CODE -->
</div>
</body>
</html>
