設置サンプル

参照：　jScrollPanel

基本的な例

Krispy Kreme Doughnuts

新宿サザンテラスにいつも長蛇の列を作っている人気のドーナツ屋さん「クリスピー・クリーム・ドーナツ」。

有楽町丸井の地下にもあります！こちらも同じく長蛇の列ですが新宿よりは込んでないみたい。待っている間に焼きたてのドーナツをくれたりします♪

ドーナツの箱がピザの箱みたいでアメリカン！すごく甘いのかと思ってたら、意外とほどよい甘さ。生地はややわらかくてふんわりしてました！

指定位置まで滑らかスクロール

サインがいっぱい
芸能人の方や、著名人の方のサインが壁にところなしと！

レバ刺
びっくりするぐらい美味しいレバ刺！鮮度抜群！味付きでたれには付けて食べないタイプ。ぜんぜんレバーの臭みがなくて、ちょっとレバーって嫌いって人でもつるつるいけちゃいそう！いままで食べた中で一番おいしいレバ刺でした♪何皿もいけそうなくらい！！

ハツ刺
珍しいハツ刺。生でハツ食べるなんて初めてでした！味は、レバ刺よりもあっさりめで、まったくクセがなくて、口に入れるととろける感じがグー！うまい。としか言いようがありません♪

明太子玉子焼き
玉子焼きの中に明太子がたっぷり♪上に乗ったマヨネーズとの愛称抜群でどことなーく懐かしいお袋の味！玉子焼きは半熟でとろっとろっ♪ほっぺたがおちそうでした！

モツ鍋
キャベツたっぷり。ぷりぷりで大きなモツがたっぷり入ったモツ鍋。スープは醤油ベースのみ。1種類ってのがこだわりを感じるわぁ♪鳥小屋のモツ鍋食べるとほんと他店のモツ鍋がものたりなくなるわｗ

モツ鍋の〆
ちゃんぽん麺か雑炊が選べます！今回はちゃんぽん麺をチョイス！ぱっと見、カルボナーラみたいだけどｗ麺が太くてコシがあって、醤油ベースのスープとすごく合う！

小鳥屋@中目黒

設置サンプルのソース

<!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" />  <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.mousewheel.js"></script> <script type="text/javascript" src="/content/lib/jquery/jScrollPane.js"></script> <script type="text/javascript"> $(function() { /* スクロールパネル初期化 */ $('#pane1').jScrollPane({showArrows:true}); /* スクロールパネル初期化（アニメーション効果あり） */ $('#pane2').jScrollPane({animateTo:true, animateInterval:50, animateStep:3}); /* リンク設定 */ $('a.scroll-to-element-demo').bind( 'click', function(){ $this = $(this); var destinationSelector = $(this).attr('rel'); $('.scroll-pane', $this.parent().parent().parent()).each( function() { this.scrollTo(destinationSelector); } ); return false; } ); }); </script>  <link rel="stylesheet" type="text/css" href="/content/lib/jquery/jScrollPane.css" /> <style type="text/css"> a.jScrollArrowUp { background:url(/content/img/ajax/basic_arrow_up.gif) repeat-x 0 0; } a.jScrollArrowUp:hover { background-position:0 -15px; } a.jScrollArrowDown { background:url(/content/img/ajax/basic_arrow_down.gif) repeat-x 0 0; } a.jScrollArrowDown:hover { background-position:0 -15px; } a.jScrollActiveArrowButton, a.jScrollActiveArrowButton:hover { background-position:0 -30px; } .orange-bar .jScrollPaneTrack { background:#f60; } .orange-bar .jScrollPaneDrag { background:#00f url(/content/img/ajax/drag_grab.gif) no-repeat 50% 50%; } .orange-bar .scroll-pane { background:#69f; } .scroll-pane { width:300px; height:200px; overflow:auto; background:#ccc; float:left; } .wide { width:400px; } .super-wide { width:700px; } .tall { height:400px; } #pane1 { height:180px; } #pane2.scroll-pane { width:400px; } .cf { width:560px; padding:10px; background-color:#ccc; -webkit-border-radius:5px;-moz-border-radius:5px; } </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://www.kelvinluck.com/assets/jquery/jScrollPane/jScrollPane.html'>jScrollPanel</a></p>  <h2>基本的な例</h2> <div class="cf"> <div style="float:left; width:240px; height:180px; margin-right:10px;"> <a href="http://www.flickr.com/photos/22559849@N06/2973155055/" title="クリスピー・クリーム・ドーナツ by php_javascript_room, on Flickr"><img src="http://farm4.static.flickr.com/3141/2973155055_4cf4370939_m.jpg" width="240" height="180" alt="クリスピー・クリーム・ドーナツ" /></a> </div> <div id="pane1" class="scroll-pane"> <h2 style="margin:0;">Krispy Kreme Doughnuts</h2> <p>新宿サザンテラスにいつも長蛇の列を作っている人気のドーナツ屋さん「クリスピー・クリーム・ドーナツ」。</p> <p>有楽町丸井の地下にもあります！こちらも同じく長蛇の列ですが新宿よりは込んでないみたい。待っている間に焼きたてのドーナツをくれたりします♪</p> <p>ドーナツの箱がピザの箱みたいでアメリカン！すごく甘いのかと思ってたら、意外とほどよい甘さ。生地はややわらかくてふんわりしてました！</p> </div> </div> <h2>指定位置まで滑らかスクロール</h2> <div class="cf"> <div style="float:left; width:420px; height:180px; margin-right:10px;"> <div id="pane2" class="scroll-pane"> <p class="p1"><img src="http://farm4.static.flickr.com/3138/3032375214_5aedffaca0_s.jpg" align="right" /><strong>サインがいっぱい</strong><br>芸能人の方や、著名人の方のサインが壁にところなしと！<br clear="all" /></p> <p class="p2"><img src="http://farm4.static.flickr.com/3064/3031535599_2f8b454232_s.jpg" align="right" /><strong>レバ刺</strong><br>びっくりするぐらい美味しいレバ刺！鮮度抜群！味付きでたれには付けて食べないタイプ。ぜんぜんレバーの臭みがなくて、ちょっとレバーって嫌いって人でもつるつるいけちゃいそう！いままで食べた中で一番おいしいレバ刺でした♪何皿もいけそうなくらい！！<br clear="all" /></p> <p class="p3"><img src="http://farm4.static.flickr.com/3055/3031535435_6af4618ea1_s.jpg" align="right" /><strong>ハツ刺</strong><br>珍しいハツ刺。生でハツ食べるなんて初めてでした！味は、レバ刺よりもあっさりめで、まったくクセがなくて、口に入れるととろける感じがグー！うまい。としか言いようがありません♪<br clear="all" /></p> <p class="p4"><img src="http://farm4.static.flickr.com/3217/3031535573_6e541be249_s.jpg" align="right" /><strong>明太子玉子焼き</strong><br>玉子焼きの中に明太子がたっぷり♪上に乗ったマヨネーズとの愛称抜群でどことなーく懐かしいお袋の味！玉子焼きは半熟でとろっとろっ♪ほっぺたがおちそうでした！<br clear="all" /></p> <p class="p5"><img src="http://farm4.static.flickr.com/3239/3032375082_fd66d11941_s.jpg" align="right" /><strong>モツ鍋</strong><br>キャベツたっぷり。ぷりぷりで大きなモツがたっぷり入ったモツ鍋。スープは醤油ベースのみ。1種類ってのがこだわりを感じるわぁ♪鳥小屋のモツ鍋食べるとほんと他店のモツ鍋がものたりなくなるわｗ<br clear="all" /></p> <p class="p6"><img src="http://farm4.static.flickr.com/3171/3032374922_8fcb4ea43d_s.jpg" align="right" /><strong>モツ鍋の〆</strong><br>ちゃんぽん麺か雑炊が選べます！今回はちゃんぽん麺をチョイス！ぱっと見、カルボナーラみたいだけどｗ麺が太くてコシがあって、醤油ベースのスープとすごく合う！<br clear="all" /></p> </div> </div> <h2>小鳥屋@中目黒</h2> <ul> <li><a href="#" rel=".p1" class="scroll-to-element-demo">サインがいっぱい</a></li> <li><a href="#" rel=".p2" class="scroll-to-element-demo">レバ刺</a></li> <li><a href="#" rel=".p3" class="scroll-to-element-demo">ハツ刺</a></li> <li><a href="#" rel=".p4" class="scroll-to-element-demo">明太子玉子焼き</a></li> <li><a href="#" rel=".p5" class="scroll-to-element-demo">モツ鍋</a></li> <li><a href="#" rel=".p6" class="scroll-to-element-demo">モツ鍋の〆</a></li> </ul> </div>  </div> </body> </html>