PHP & JavaScript Room :: 設置サンプル

実行結果

設置サンプル

参照：　Marquee jQuery Plug-in

例1：長いメッセージを垂直方向に切り替え表示＋表示されたメッセージを水平方向にスクロール

例2：メッセージを下から上にスクロール表示

例3：要素を動的に追加

設置サンプルのソース

<!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>
   <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 &amp; JavaScript Room</a> :: 設置サンプル</h1>
<h3 class='h'>実行結果</h3>
      <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>