スポンサード

以前はPCサイトやガラケーサイトで頻繁に目にした marquee タグによる文字のスクロール表示ですが、モダンブラウザや iPhone、iPad、またIE 8 や 7 の環境でもマーキーっぽく文字を流したい場合は、jQuery を利用すると便利です。

今回はjQuery を使って文字をマーキーっぽくスライド表示させる方法に加えて、
「指定の文字数以上ならマーキー、未満なら固定表示」
なんていう条件分岐もやってみようと思います。

jQuery Marquee のダウンロード

以下より javascript ファイルをダウンロードして、jquery.marquee.js のようにリネームします。

jQuery Marquee の設置

jquery ファイルと一緒に ダウンロードした jquery.marquee.js ファイルを設置します。

<script src="./jquery.min.js"></script>
<script src="./jquery.marquee.js"></script>
<script>
$(function () {
	$('p.ticker').marquee();
});
</script>

jQuery Marquee でマーキーっぽく文字を流してみる

HTML 側の記述例ですが、マーキーのようにスクロール表示させる要素に ticker のクラスを当てます。

<p class="ticker">
昔ながらのマーキーのようなスクロール表示。
</p>

デフォルトの設定では、以下のデモのような感じでテキストが流れ続けます。

marquee タグは速度を調整したとしても、どうしてもブラウザ毎に挙動がばらつくので…こっちの方がスムーズに動いて気持ちいいです。

jQuery Marquee によるマーキーっぽいスクロールのデモ

指定文字以上の時にマーキーのように流す

少しカスタマイズしてみますが、例えば
「20 文字以上のテキストはマーキーのように流して、20 文字未満の場合は固定表示」
なんて処理も可能です。

jQuery Marquee の設置

先の例と同様に jquery.marquee.js ファイルを設置しますが、今回は「20 文字以上の場合はマーキーっぽくスクロール表示」させる処理を挟んでいます。

<script src="./jquery.min.js"></script>
<script src="jquery.marquee.js"></script>
<script>
$(function () {
  $('p.ticker2').each(function(){
    if ($(this).text().replace(/\s+/g,'').length > 20) {
		  $(this).marquee();
		}			
  });
});
</script>

指定文字によるマーキーの制御

HTMLの例ですが、文字数に応じて以下の2 パターン用意しています。

<p class="ticker2">
こっちは20文字未満なので固定表示。
</p>

<p class="ticker2">
こっちの20文字以上の文章は、マーキーのように流して表示します。
</p>

↓こんな違いが出ます。

指定文字によるマーキーの制御のデモ

スポンサード