概要
- 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 // スクロール後のコールバック
}