Marquee jQuery Pluginを使って文字を流す

Marquee jQuery Pluginを使って文字を流す

概要

  • HTML5には、文字を水平方向に流すmarqueeタグが存在する
  • HTML5非対応のブラウザでも表示できるようにしたい
  • Javascript(jQuery)を使って実現する
  • 自分で作ろうとしたけど汎用性を確保できない気がした
  • 既存のjQuery向けプラグインスクリプトを使おう
  • Marquee jQuery Pluginが簡単に使える

使用方法

ヘッダに以下を記述

<script type="text/javascript" src="jquery.marquee.min.js"></script>

リスト要素に流したい要素を格納する

<ul id="marquee_ul" class="marquee">
 <li><span id="text1" class="ticker_text">Text1</span></li>
 <li><span id="text2" class="ticker_text">Text2</span></li>
</ul>

サイトに記述されているようにCSSを書く

ul.marquee{
 display:block;
 padding:0;
 margin:0;
 list-style:none;
 line-height:1;
 position:relative;
 overflow:hidden;

 /* 以下はオプション */
 width:300px;
 height:20px;
 border:1px solid #222;
}

ul.marquee li{
 position:absolute;
 top:-999em;
 left:0;
 display:block;
 white-space:nowrap;

 /* 以下はオプション */
 padding:3px 5px;
 color:white;
}

Javascript(要jQuery)で以下を実行すると,テキストが流れだす

$(document).ready(function(){
 // マウスオーバーで止めない,スクロールのスピードを変更
 $("marquee_ul").marquee({pauseOnHover:false,scrollSpeed:24});
}

オプション

Giva Labs - Marquee jQuery Plug-in | Givaのオプション解説のてきとうな日本語訳

{
    yScroll: "top"                  // 初期位置(topかbottom)
  , showSpeed: 850                  // ドロップダウンの速度
  , scrollSpeed: 12                 // スクロールの速度
  , pauseSpeed: 5000                // 次のメッセージに進むかスクロールに移るまでの時間
  , pauseOnHover: true              // マウスオーバーで停止するかどうか
  , loop: -1                        // 繰り返し回数(負の値にすると無限回)
  , fxEasingShow: "swing"           // ドロップダウンのときのイージング
  , fxEasingScroll: "linear"        // スクロールのときのイージング

  // 表示されている要素に設定するクラス名
  , cssShowing: "marquee-showing"

  // イベントハンドラ
  , init: null                      // 初期化後のコールバック
  , beforeshow: null                // ドロップダウン前のコールバック
  , show: null                      // ドロップダウン後のコールバック
  , aftershow: null                 // スクロール後のコールバック
}