ホーム > タグ > jQuery

jQuery

テキストや画像をスクロールさせる方法|jQuery|WEB制作

jQueryでテキストや画像をスクロールさせます。

【使うもの】
jStockTicker Plugin

上記サイトから”View all releases”をクリックして、”jStockTicker plugin 1.1″をダウンロード。
解凍して、”jquery.jstockticker-1.1.js”を取得。

1
2
3
4
5
6
7
8
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">google.load("jquery", "1.3");</script>
<script type="text/javascript" src="js/jquery.jstockticker-1.1.js"></script>
<script>
  $(function() {
    $("#ticker").jStockTicker({interval: 20});
  });
</script>

“#ticker”はスクロール範囲のIDセレクタ、intervalの値は小さければ早く、大きければ遅くなります。

1
2
3
4
5
6
<div class="tickbox">
  <div id="ticker">
    <span>TEXT TEXT TEXT</span>
    <span><img src="#" alt="IMAGE" name="IMAGE" />
  </div>
</div>

idがtickerのdivで囲われた部分がスクロールします。
テキストでも、イメージでも何でもいいです。
ただし、これだけだとうまく実装できないので、最後にCSSで定義してあげます。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
.tickerbox {
  width: 200px;
  text-align: left; /* 重要! */
  border: solid #666 1px;
  padding: 5px;
  overflow: hidden; /* 重要! */
}
 
#ticker {
  position: relative;
}
 
#ticker span {
  padding-right: 25px;
}

CSSでは、overflowとtext-alignが本実装にむちゃくちゃ影響します。
ここ、うまくやらないとひどい目に合います。

で、あと補足として、上記の場合だと、tickerboxのwidthサイズより、
スクロールするオブジェクト(id=tickerのdivで囲われた部分)の総サイズが小さいと、
スムーズにスクロールしないので、注意。

見た目重視するなら、同じオブジェクトを繰り返し貼り付けるとか。

Home > Tags > jQuery

Search
東日本大震災義援金

東日本大震災義援金についてのお知らせです。
→  日本赤十字社HP

Ads

Return to page top