[JS]スマホでもIE7 にも対応したjQuery ベースの「マーキー」っぽいスクロール
スポンサード
jQuery Marquee によるマーキーっぽいスクロールのデモ
「20 文字以上のテキストはマーキーのように流して、20 文字未満の場合は固定表示」
なんて処理も可能です。
指定文字によるマーキーの制御のデモ
スポンサード
以前は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>↓こんな違いが出ます。
指定文字によるマーキーの制御のデモ
スポンサード
コメント