以前はPCサイトやガラケーサイトで頻繁に目にしたmarqueeタグによる文字のスクロール表示ですが、モダンブラウザやiPhone、iPad、またIE8や7の環境でもマーキーっぽく文字を流したい場合は、jQuery を利用すると便利です。
今回はjQuery を使って文字をマーキーっぽくスライド表示させる方法に加えて、指定の文字数以上ならマーキー、未満なら固定表示という条件分岐もやってみようと思います。
jQuery Marquee のダウンロード
以下よりjavascriptファイルをダウンロードしてjquery.marquee.jsのようにリネームします。jQuery Marquee
jQuery Marquee の設置
jqueryファイルと一緒にダウンロードしたjquery.marquee.jsファイルを設置します。|
1 2 3 4 5 6 7 |
<script src="./jquery.min.js"></script> <script src="./jquery.marquee.js"></script> <script> $(function () { $('p.ticker').marquee(); }); </script> |
jQuery Marquee でマーキーっぽく文字を流してみる
HTML側の記述例ですが、マーキーのようにスクロール表示させる要素にtickerのクラスを当てます。|
1 2 3 |
<p class="ticker"> 昔ながらのマーキーのようなスクロール表示。 </p> |
デフォルトの設定では、以下のデモのような感じでテキストが流れ続けます。
marquee タグは速度を調整したとしても、どうしてもブラウザ毎に挙動がばらつくので…こっちの方がスムーズに動いて気持ちいいです。
jQuery Marquee によるマーキーっぽいスクロールのデモ
指定文字以上の時にマーキーのように流す
少しカスタマイズしてみますが、例えば「20 文字以上のテキストはマーキーのように流して、20 文字未満の場合は固定表示」
なんて処理も可能です。
jQuery Marquee の設置
先の例と同様にjquery.marquee.jsファイルを設置しますが、今回は20文字以上の場合はマーキーっぽくスクロール表示させる処理を挟んでいます。|
1 2 3 4 5 6 7 8 9 10 11 |
<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パターン用意しています。|
1 2 3 4 5 6 7 |
<p class="ticker2"> こっちは20文字未満なので固定表示。 </p> <p class="ticker2"> こっちの20文字以上の文章は、マーキーのように流して表示します。 </p> |
↓こんな違いが出ます。
指定文字によるマーキーの制御のデモ
コメント