文字列が範囲を超えるとmarqueeが有効になるjQueryプラグイン

marqueeとは

文字が右から左に動くやつ。

あいうえおかきくけこさしすせそたちつてとなにぬねの

まずこのようにdivタグの中にpタグを入れて、pタグの中に文字列を入れる。

<div class="marquee">
  <p>あいうえおかきくけこさしすせそたちつてとなにぬねの</p>
</div>

あとはjQueryとjmarqueeを読みこんで下記のコードを記述するだけで文字列の幅が表示範囲を超える場合は自動的にmarqueeになる。

$(function() {
  $('.marquee').jmarquee();
});

HTML, CSS読み込み後にJavaScriptが読み込まれるのでpタグ部分の高さが崩れることがある。

そのため気になる場合は下記のCSSの記述が必要。

.marquee > p {
  visibility: hidden;
  margin: 0;
  white-space: nowrap;
}

デフォルトでは.marqueeとその直下のpタグという構造に適用される。

例えば下記のように.fooでその直下が.barという構造に適用したい場合は別途targetを指定してこのように記述する。

<div class="foo">
  <div class="bar">長い文章(以下略)</div>
</div>

$(function() {
  $('.marquee').jmarquee({
    target: '.bar'
  });
});

表示秒数を変更したい場合はtimeを指定(デフォルトは10s)

5秒表示にしたい場合はtime: '5s'を指定する。

$(function() {
  $('.marquee').jmarquee({
    time: '5s'
  });
});

前述のtargetと組み合わせた場合はこうなる

$(function() {
  $('.foo').jmarquee({
    target: '.bar',
    time: '5s'
  });
});