Search
  1. Marquee jQuery Plug-in〔リスト要素を水平・垂直方向にスクロール可能なMarqueeに変換〕
  2. jquery.scrollable 1.0.1 - Make your HTML elements move 〔HTML要素をスムーズにスクロール〕
  3. jQuery Scroll Follow〔画面をスクロールすると、特定の要素も一緒にスクロール〕
  4. jScrollPanel〔スクロールパネル〕
  5. liScroll (a jQuery News Ticker made easy) 1.0〔リスト要素をスクロールするニュースティッカーに変換〕
  6. Simple jQuery Spy Effect〔要素の自動スクロール〕
  7. Smart Floating Banners〔画面をスクロールしても常に定位置にバナーを表示〕

Marquee jQuery Plug-in
リスト要素を水平・垂直方向にスクロール可能なMarqueeに変換

2010/2/22

Marquee jQuery Plug-in

jquery.js、jquery.marquee.js

リスト要素の各アイテムに指定したメッセージをMarquee風に切替表示するjQueryプラグイン。

文字を流すスタイルは上から下、下から上、左から右など、垂直・水平共にオプションで指定することができます。

初期化時、メッセージ切替前/切替時、スクロール終了時に呼ばれるコールバック関数が用意されています。 長いメッセージを垂直方向に切り替える場合は、メッセージ切り替え表示後、更に表示されたメッセージを水平方向にスクロールさせることで、長いメッセージをすべて表示させることができます。

APIが用意されているので、動的にリスト要素にアイテムを追加したり、スクロールの一時停止や再開なども簡単に実装することができます。

設置イメージ設置イメージ
Garage Door Style Menuの設置サンプルサンプルを見る
<!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 type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
        <script type="text/javascript" src="/content/lib/jquery/jquery.marquee.js"></script>
        <script type="text/javascript">
            $(function(){
                /* 例1 */
                $("#marquee1").marquee({
                    loop: -1
                    // 初期時
                    , init: function ($marquee, options){
                        if( $marquee.is("#marquee2") ) options.yScroll = "bottom";
                    }
                    // メッセージ切替表示前
                    , beforeshow: function ($marquee, $li){
                        var $author = $li.find(".author");
                        if( $author.length ){
                            $("#marquee-author").html("<span style='display:none;'>" + $author.html() + "</span>").find("> span").fadeIn(850);
                        }
                    }
                    // メッセージ表示切替時(上から下にスライド表示された時)
                    , show: function (){
                    }
                    // メッセージスクロール完了後(スライド表示されたメッセージが左方向へすべてスクロールされた時)
                    , aftershow: function ($marquee, $li){
                        // find the author
                        var $author = $li.find(".author");
                        // hide the author
                        if( $author.length ) $("#marquee-author").find("> span").fadeOut(250);
                    }
                });
                /* 例2 */
                $("#marquee2").marquee({yScroll: "bottom"});
            });
            var iNewMessageCount = 0;
            function addMessage(selector){
                iNewMessageCount++;
                var $ul = $(selector).append("<li>New message #" + iNewMessageCount + "</li>");
                // update the marquee
                $ul.marquee("update");
            }
            function pause(selector){
                $(selector).marquee('pause');
            }
            function resume(selector){
                $(selector).marquee('resume');
            }
        </script>
        <!-- CSS -->
        <style type="text/css">
            ul.marquee {
                display: block;
                margin:0; padding:0;
                list-style: none;
                line-height: 1;
                position: relative;
                overflow: hidden;
                /* optional */
                width: 500px; height: 22px;
                background-color: #f2f2ff;
                border: 1px solid #08084d;
            }
            ul.marquee li {
                margin:0;
                list-style:none;
                position: absolute;
                top: -999em; left: 0;
                display: block;
                white-space: nowrap;
                /* optional */
                font: 14px Arial, Helvetica, sans-serif;
                padding: 3px 5px;
            }
        </style>
    </head>
    <body>
        <div id="wrap">
            <h1>設置サンプル</h1>
            <p>参照: <a href='http://www.givainc.com/labs/marquee_jquery_plugin.htm'>Marquee jQuery Plug-in</a></p>
<!-- CODE -->
            <h2>例1:長いメッセージを垂直方向に切り替え表示+表示されたメッセージを水平方向にスクロール</h2>
            <ul id="marquee1" class="marquee"> 
                <li>In mattis ridiculus risus lacus tempor integer integer dis nec sagittis eros? Et dictumst. Ut a, amet purus, mattis? Diam rhoncus lacus! Dolor quis? Mattis arcu non ultricies, ut magnis, platea urna, odio integer a, purus, rhoncus nisi, urna mattis, sociis, phasellus, cursus! Enim turpis lacus turpis augue, hac est.</li>
                <li>Cum parturient lacus aliquet, hac auctor, augue enim augue, duis enim amet tristique aliquet odio amet elit magnis porta egestas! Porttitor cursus aliquet. Non, eu magna augue est augue pulvinar. Parturient enim risus! Elementum augue scelerisque enim montes enim aliquet a enim. Elit cum montes elit massa massa penatibus.</li>
                <li>Magna in pellentesque, tristique lundium rhoncus velit pid, platea in purus est dictumst? Integer pulvinar urna tortor! Proin in magnis tincidunt nec risus urna magna auctor ridiculus massa. Lundium dapibus ac augue ut placerat lundium dictumst, amet augue nunc! Dapibus enim integer massa pid et et porttitor purus turpis.</li>
                <li>Porttitor amet ac nec? A porta augue est facilisis. Augue elit massa rhoncus facilisis vut urna scelerisque! Amet nec? Ut proin porttitor integer? Augue, proin augue in in aliquam, sed penatibus. Dolor nascetur turpis amet, sed velit nascetur! Urna, aliquet, augue habitasse massa eu. Cras urna aenean. Mid turpis.</li>
                <li>Rhoncus aliquet. Elit? Nunc velit a in, odio a, rhoncus in vel cum etiam amet tincidunt nascetur pulvinar aliquet, in sociis risus porta, proin mid adipiscing turpis egestas in nisi ut? Ultricies arcu? Augue pellentesque. Ut in dignissim turpis, nunc pid. Sociis montes aliquet integer non integer phasellus sociis.</li>
            </ul>
            <p> 
                <input type="button" value="一時停止" onclick="pause('#marquee1');" /> 
                <input type="button" value="再開" onclick="resume('#marquee1');" /> 
            </p>

            <h2>例2:メッセージを下から上にスクロール表示</h2>
            <ul id="marquee2" class="marquee"> 
                <li>Elementum porta mus! Magnis vut, sit aliquet proin? Adipiscing risus.</li>
                <li>Risus, sit, eu! Facilisis in velit ridiculus, rhoncus et.</li>
                <li>Lacus? Mid augue, natoque, nunc sit risus natoque dapibus.</li>
                <li>Turpis turpis dignissim. Ut amet, et enim! Quis scelerisque.</li>
                <li>Dictumst a! Nisi cursus tempor porttitor velit. Cursus in.</li>
            </ul>

            <h2>例3:要素を動的に追加</h2>
            <ul id="marquee3" class="marquee">
                <li>Elementum porta mus! Magnis vut, sit aliquet proin? Adipiscing risus.</li>
            </ul>
            <p>
                <input type="button" value="メッセージ追加" onclick="addMessage('#marquee3');" />
            </p>
<!-- / CODE -->
        </div>
    </body>
</html>

jquery.scrollable 1.0.1 - Make your HTML elements move
HTML要素をスムーズにスクロール

2009/2/15

jquery.scrollable 1.0.1

MIT&GPL 2+
[JS]jquery.js、jquery.scrollable-1.0.1.js
[CSS]scrollable-navig.css

スクロールするHTML要素を作成するjQueryプラグイン。

ナビゲーションボタンと前後に移動可能な矢印ボタンが付いています。 要素をクリックしても次の要素へスクロールすることができます。

設置イメージ設置イメージ
Garage Door Style Menuの設置サンプルサンプルを見る
<!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" />
        <link rel="stylesheet" type="text/css" href="/content/lib/jquery/scrollable-navig.css" />
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
        <script type="text/javascript" src="/content/lib/jquery/jquery.scrollable-1.0.1.js"></script>
        <script type="text/javascript">
            $(function() {
                // initialize scrollable 
                $(".scrollable").scrollable({
                    size:1,
                    items: '#thumbs',
                    hoverClass:'hover'
                });
            });
        </script>
    </head>
    <body>
        <div id="wrapper">
            <h1>設置サンプル</h1>
            <p>参照: <a href='http://www.flowplayer.org/tools/scrollable.html'>jquery.scrollable 1.0.1</a></p>
<!-- CODE -->
            <div class="cf">
                <div class="navi"></div>
                <a class="prev"><!-- 前へリンク --></a>
                <!-- ルーツ要素 -->
                <div class="scrollable">
                    <div id="thumbs">
                        <div>
                            <img src="http://farm4.static.flickr.com/3514/3274514408_1800118ded_m.jpg" />
                            <h3><em>1. </em>アボカド シーザーサラダ</h3>
                            <p>よくわからないけどちゃんとアボガド入りです!クリーミーなシーザードレッシングとアボガドの相性がとってもよかったです。</p>
                            <span class="blue">@アボガドダイニング Platinum Lounge</span>
                        </div>
                        <div>
                            <img src="http://farm4.static.flickr.com/3509/3273696567_ebf4ed4381_m.jpg" />
                            <h3><em>2. </em>アボカド刺</h3>
                            <p>アボガドにお醤油がかかってるせいか、わさびをちょっとのせて食べると、マグロ入ってないのに、マグロの味がしましたw</p>
                            <span class="blue">@アボガドダイニング Platinum Lounge</span>
                        </div>
                        <div>
                            <img src="http://farm4.static.flickr.com/3396/3274514302_10521a0a98_m.jpg" />
                            <h3><em>3. </em>フライドポテト アボカドディップ添え</h3>
                            <p>アボカドディップはとってもクリーミー!ポテトじゃなくてもなんにでも合いそう♪</p>
                            <span class="blue">@アボガドダイニング Platinum Lounge</span>
                        </div>
                        <div>
                            <img src="http://farm4.static.flickr.com/3427/3273696469_aa2aaf5e89_m.jpg" />
                            <h3><em>4. </em>ベーコンとアボカドのピザ(トマトソース)</h3>
                            <p>めちゃくちゃおいしかったアボカドのピザ!ピザ生地はクリスピータイプでさくさく!</p>
                            <span class="blue">@アボガドダイニング Platinum Lounge</span>
                        </div>
                        <div>
                            <img src="http://farm4.static.flickr.com/3316/3273696493_570fdd0ee5_m.jpg" />
                            <h3><em>5. </em>ハニートースト</h3>
                            <p>アボカドたっぷしのってますが、れっきとしたデザートです。ハニートーストの上にバニラアイスが乗っていて、その上にアボガドがぱらぱらと。アボカドっぽくなくて、どちらかといえば栗のような味がしました!</p>
                            <span class="blue">@アボガドダイニング Platinum Lounge</span>
                        </div>
                    </div>
                </div>
                <a class="next"><!-- 次へリンク --></a>
            </div><!-- cf -->
<!-- / CODE -->
        </div>
    </body>
</html>

jQuery Scroll Follow
画面をスクロールすると、特定の要素も一緒にスクロール

unknown

jQuery Scroll Follow

IE6、IE7、FF2、FF3、Safari 3、and Opera 9 on Windows.
FF3 and Safari 3 on MacOSX.
jquery.js v1.2.6、jquery:ui.core.js、jquery.scrollfollow.js、jquery.cookie.js

画面をスクロールすると、特定の要素も一緒にスクロールさせるjQueryプラグインです。 スクロール可能な範囲を指定したり、一緒にスクロールさせるかどうかの有無も指定することができます。

設置イメージ設置イメージ
jQuery Scroll Followの設置サンプルサンプルを見る
<!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 type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
        <script type="text/javascript" src="/content/lib/jquery/ui/ui.core.js"></script>
        <script type="text/javascript" src="/content/lib/jquery/jquery.scrollfollow.js"></script>
        <script type="text/javascript">
               $(function(){
                $('#example').scrollFollow();
            });
        </script>
        <!-- CSS -->
        <style type="text/css">
            #example { position:relative; width:260px; text-align:center; border:1px solid #000; background-color:#000; color:#fff; }
            #example a { color:#fff; }
        </style>
    </head>
    <body>
        <div id="wrapper">
            <h1>設置サンプル</h1>
            <p>参照: <a href='http://kitchen.net-perspective.com/open-source/scroll-follow/'>jQuery Scroll Follow</a></p>
<!-- CODE -->
            <div id="example">
                <p><img src="http://farm4.static.flickr.com/3222/2974008614_736e2d5b50_m.jpg" width="240" height="180" alt="くまさんケーキ" /></p>
                <p>スクロールすると一緒にスクロールします。</p>
                <p><a href="#wrapper">↑&nbsp;ページの先頭へ</a></p>
            </div>
            <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<!-- / CODE -->
        </div>
    </body>
</html>
jQuery Scroll Followの設置サンプル - スクロールの有無を切替可サンプルを見る
<!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 type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
        <script type="text/javascript" src="/content/lib/jquery/ui/ui.core.js"></script>
           <script type="text/javascript" src="/content/lib/jquery/jquery.cookie.js"></script>
        <script type="text/javascript" src="/content/lib/jquery/jquery.scrollfollow.js"></script>
        <script type="text/javascript">
               $(function(){
                $('#example').scrollFollow({speed: 1000,offset: 60,killSwitch: 'exampleLink',onText: 'Disable Follow',offText: 'Enable Follow'} );
            });
        </script>
        <!-- CSS -->
        <style type="text/css">
            #example { position:relative; width:260px; text-align:center; border:1px solid #000; background-color:#000; color:#fff; }
            #example a { color:#fff; }
            button { padding:3px 5px; }
        </style>
    </head>
    <body>
        <div id="wrapper">
            <h1>設置サンプル</h1>
            <p>参照: <a href='http://kitchen.net-perspective.com/open-source/scroll-follow/'>jQuery Scroll Follow</a></p>
<!-- CODE -->
            <h2>スクロールの有無を切替可</h2>
            <div id="example">
                <p><img src="http://farm4.static.flickr.com/3222/2974008614_736e2d5b50_m.jpg" width="240" height="180" alt="くまさんケーキ" /></p>
                <p>スクロールすると一緒にスクロールします。</p>
                <p>下記のボタンをクリックすると、スクロールするかしないかを切り替えることができます。</p>
                <p><button id="exampleLink">Default Text</button></p>
                <p><a href="#wrapper">▲ページの先頭へ</a></p>
            </div>
            <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<!-- / CODE -->
        </div>
    </body>
</html>
jQuery Scroll Followの設置サンプル - 指定範囲内でのみスクロールサンプルを見る
<!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>jQuery Scroll Follow - 指定範囲内でのみスクロール | 設置サンプル</title>
        <link rel="stylesheet" type="text/css" href="/content/lib/global.css" />
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
        <script type="text/javascript" src="/content/lib/jquery/ui/ui.core.js"></script>
        <script type="text/javascript" src="/content/lib/jquery/jquery.scrollfollow.js"></script>
        <script type="text/javascript">
               $(document).ready(function(){
                $('#example').scrollFollow({speed: 1000,offset: 60,killSwitch: 'exampleLink',onText: 'Disable Follow',offText: 'Enable Follow'} );
            });
        </script>
        <style type="text/css">
            #container { width:260px; height: 780px; margin: 10px; padding: 10px; background: #ccc; }
            #example { position:relative; width:260px; text-align:center; border:1px solid #000; background-color:#000; color:#fff; }
            #example a { color:#fff; }
        </style>
    </head>
    <body>
        <div id="wrapper">
            <h1>設置サンプル</h1>
            <p>参照:<a href='http://kitchen.net-perspective.com/open-source/scroll-follow/'>jQuery Scroll Follow</a></p>
<!-- CODE -->
            <h2>指定範囲内でのみスクロール</h2>
            <div id="container">
                <div id="example">
                    <p><img src="http://farm4.static.flickr.com/3222/2974008614_736e2d5b50_m.jpg" width="240" height="180" alt="くまさんケーキ" /></p>
                    <p>スクロールするとグレーの背景色の範囲内で<br>一緒にスクロールします。</p>
                    <p><a href="#wrapper">▲ページの先頭へ</a></p>
                </div>
            </div>
            <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<!-- / CODE -->
        </div>
    </body>
</html>

jScrollPanel
スクロールパネル

2008/11/16

jScrollPanel

[CSS]jScrollPane.css
[JS]jquery.js v1.2.6、jquery.mousewheel.js、jScrollPane.js

スクロールパネルを実装するjQueryプラグイン。 スクロールバー部分のスタイルをCSSでカスタマイズすることができます。 また、任意の位置までスクロールさせたり、外部ファイルを読み込んでスクロールパネルに表示するなど、様々なサンプルが掲載されています。

設置イメージ設置イメージ
HEAD
<!-- JS -->
<script type="text/javascript" src="jquery-1.2.6.min.js" charset="utf-8"></script>
<script type="text/javascript" src="jquery.mousewheel.js" charset="utf-8"></script>
<script type="text/javascript" src="jScrollPane.js" charset="utf-8"></script>
<script type="text/javascript">
  $(function() {
    /* スクロールパネル初期化 */
    $('#pane1').jScrollPane({showArrows:true});
    /* リンク設定 */
    $('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>
<!-- CSS -->
<link rel="stylesheet" type="text/css" href="jScrollPane.css" charset="utf-8" />
<style type="text/css">
  a.jScrollArrowUp { background:url("↑画像URL") repeat-x 0 0; }
  a.jScrollArrowUp:hover { background-position:0 -15px; }
  a.jScrollArrowDown { background:url("↓画像URL") repeat-x 0 0; }
  a.jScrollArrowDown:hover { background-position:0 -15px; }
  a.jScrollActiveArrowButton,
  a.jScrollActiveArrowButton:hover { background-position:0 -30px; }
  .scroll-pane { width:300px; height:200px; overflow:auto; background:#ccc; float:left; }
  #pane1 { height:180px; }
</style>
HTML
<div id="pane1" class="scroll-pane">テキスト</div>
jScrollPanelの設置サンプルサンプルを見る
<!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.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>
        <!-- CSS -->
        <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>
    </head>
    <body>
        <div id="wrapper">
            <h1>設置サンプル</h1>
            <p>参照: <a href='http://www.kelvinluck.com/assets/jquery/jScrollPane/jScrollPane.html'>jScrollPanel</a></p>
<!-- CODE -->
            <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種類ってのがこだわりを感じるわぁ♪鳥小屋のモツ鍋食べるとほんと他店のモツ鍋がものたりなくなるわw<br clear="all" /></p>
                        <p class="p6"><img src="http://farm4.static.flickr.com/3171/3032374922_8fcb4ea43d_s.jpg" align="right" /><strong>モツ鍋の〆</strong><br>ちゃんぽん麺か雑炊が選べます!今回はちゃんぽん麺をチョイス!ぱっと見、カルボナーラみたいだけどw麺が太くてコシがあって、醤油ベースのスープとすごく合う!<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>
<!-- / CODE -->
        </div>
    </body>
</html>

liScroll (a jQuery News Ticker made easy) 1.0
リスト要素をスクロールするニュースティッカーに変換

2009/3/14

liScroll (a jQuery News Ticker made easy) 1.0

jquery.js、jquery.li-scroller.js v1.0

リスト要素をスクロールするニュースティッカーに変換するjQueryプラグイン。

リンクにマウスオーバーするとスクロールが一時停止し、マウスアウトするとスクロールが再開します。 すべてのニュースを表示し終わると、最初のニュースから繰り返しスクロールされます。 オプションで、スクロール速度(travelocity)を指定することもできます。

設置イメージ設置イメージ
liScroll (a jQuery News Ticker made easy) 1.0の設置サンプルサンプルを見る
<!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" />
        <link rel="stylesheet" type="text/css" href="/content/lib/jquery/jScrollPane.css" />
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
        <script type="text/javascript" src="/content/lib/jquery/jquery.li-scroller.1.0.js"></script>
        <script type="text/javascript">
            $(function() {
                /* デフォルト */
                $("ul#ticker01").liScroll(); 
                /* スクロール速度を指定 */
                $("ul#ticker02").liScroll({travelocity:0.08});
            });
        </script>
        <style type="text/css">
            .tickercontainer { border:1px solid #000; background:#fff; width:638px; height:27px; margin:10px 0; padding:0; overflow:hidden;  }
            .tickercontainer .mask { position:relative; left:10px; top:8px; width:618px; overflow:hidden; }
            ul.newsticker { position:relative; left:650px; font:bold 10px Verdana; list-style-type:none; margin:0; padding:0; }
            ul.newsticker li { float:left; margin:0; padding:0; background:#fff; }
            ul.newsticker a { white-space:nowrap; padding:0; color:#ff0000; font:bold 10px Verdana; margin:0 50px 0 0; }
            ul.newsticker span { margin:0 10px 0 0; }
        </style>
    </head>
    <body>
        <div id="wrapper">
            <h1>設置サンプル</h1>
            <p>参照: <a href='http://www.gcmingati.net/wordpress/wp-content/lab/jquery/newsticker/jq-liscroll/scrollanimate.html'>liScroll (a jQuery News Ticker made easy) 1.0</a></p>
            <p>▼リスト要素をスクロールするニュースティッカーに変換します。</p>
<!-- CODE -->
            <h2>デフォルト</h2>
            <ul id="ticker01"> 
                <li><span>2009/01/05</span><a href="#">ニュースタイトル5</a></li>
                <li><span>2009/01/04</span><a href="#">ニュースタイトル4</a></li>
                <li><span>2009/01/03</span><a href="#">ニュースタイトル3</a></li>
                <li><span>2009/01/02</span><a href="#">ニュースタイトル2</a></li>
                <li><span>2009/01/01</span><a href="#">ニュースタイトル1</a></li>
            </ul>

            <h2>スクロール速度指定</h2>
            <ul id="ticker02">
                <li><span>2009/01/05</span><a href="#">ニュースタイトル5</a></li>
                <li><span>2009/01/04</span><a href="#">ニュースタイトル4</a></li>
                <li><span>2009/01/03</span><a href="#">ニュースタイトル3</a></li>
                <li><span>2009/01/02</span><a href="#">ニュースタイトル2</a></li>
                <li><span>2009/01/01</span><a href="#">ニュースタイトル1</a></li>
            </ul>
<!-- / CODE -->
        </div>
    </body>
</html>

Simple jQuery Spy Effect
要素の自動スクロール

2009/3/1

Simple jQuery Spy Effect

jquery.js、jquery.spy-effect.js

要素を自動スクロールするjQueryプラグイン。

指定したリスト要素の子要素であるli要素を順番にスクロールして表示します。 下の要素がフェードアウトしながら消えると、スクロールし、上の要素をフェードインしながら表示されます。

設置イメージ設置イメージ
Simple jQuery Spy Effectの設置サンプルサンプルを見る
<!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>
    </head>
    <body>
        <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>

Smart Floating Banners
画面をスクロールしても常に定位置にバナーを表示

2008/12/5

Smart Floating Banners

IE未対応
jquery.js v1.2.6

画面をスクロールしても、常に定位置にバナーを表示するjQueryプラグイン。 バナーの上下にコンテンツを配置したサンプルが掲載されています。 RSSアイコンやコンテンツのローカルナビゲーションなどに使えそう。

設置イメージ設置イメージ
Garage Door Style Menuの設置サンプルサンプルを見る
<!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 type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
        <script type="text/javascript">
            $(function(){
                $(window).scroll(function(){
                    if($(window).scrollTop() > $(".smartBannerIdentifier").offset({ scroll: false }).top){
                        $(".banner").css("position", "fixed");
                        $(".banner").css("top", "0");
                    }
                    if($(window).scrollTop() <= $(".smartBannerIdentifier").offset({ scroll: false }).top){
                        $(".banner").css("position", "relative");
                        $(".banner").css("top", $(".smartBannerIdentifier").offset);
                    }
                }); 
            });
        </script>
        <!-- CSS -->
        <style type="text/css">
            .main { width:750px; margin:0 auto; }
            .cleft  { float:left; width:500px; background-color:#ccc; }
            .cright { float:right; width:250px; background-color:#63b6ce; color:#fff; }
            .banner { background-color:#effff7; width:250px; }
            .inner { margin:10px; }
        </style>
    </head>
    <body>
        <div id="wrap">
            <h1>設置サンプル</h1>
            <p>参照: <a href='http://www.webresourcesdepot.com/smart-floating-banners/'>Smart Floating Banners</a></p>
            <p>▼画面をスクロールしても、常に定位置にバナーが表示されます。</p>
<!-- CODE -->
            <div class="main cf">
                <div class="cleft">
                    <div class="inner">
                        <script type="text/javascript">
                            for(var i=0; i<=20; i++){
                                document.write("some content<br \/><br \/><br \/><br \/><br \/><br \/>\n");
                            }
                        </script>
                    </div>
                </div><!-- cleft -->
                <div class="cright">
                    <p style="margin:50px 0;"> some content</p>
                    <div class="smartBannerIdentifier"></div>
                    <div class="banner">
                        <!-- バナー -->
                        <script type="text/javascript" src="http://widgetserver.com/syndication/subscriber/InsertWidget.js?appId=f5909429-d5b3-4c5c-befb-da918501d20b"></script><noscript>Get the <a href="http://www.widgetbox.com/widget/bunnyhero-penguin">bunnyhero penguin</a> widget and many other <a href="http://www.widgetbox.com/">great free widgets</a> at <a href="http://www.widgetbox.com">Widgetbox</a>!</noscript>
                    </div><!-- banner -->
                    </div>
                </div><!-- cright -->
            </div>
<!-- CODE / -->
        </div>
    </body>
</html>

関連コンテンツ

Q. このサイトの情報はお役に立ちましたでしょうか?

投票する 投票結果を見る

管理人に【web拍手】を送るweb拍手(1行メッセージも送れます♪)

pagetop

polarized women