昔よく見たテキストが横に流れていくスプクリクト

昔よく見たテキストが横に流れていくスプクリクト

昔よくテキストが横に流れるようなサイトって見かけたと思うですが、それをjQueryを使って出来るプラグインを見かけたので紹介しておきます。

demo page

…ここからが続き

jStockTicker Plugin使い方

jStockTicker Pluginの「Download」からjStockTicker.jsをダウンロード出来ます。

head内

<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>

XHTML

<div id="ticker">
<span>Sample 1</span><span>Sample 2</span><span>Sample 3</span><span>Sample 4</span><span>Sample 5</span><span>Sample 6</span><span>Sample 7</span><span>Sample 8</span><span>Sample 9</span><span>Sample 10</span>
<!--/ #ticker--></div>

スクリプトが実行された際は下記の用になります。

昔よく見たテキストが横に流れていくスプクリクト

<div class="container">
<div class="wrap">

<div id="ticker">
<span>Sample 1</span><span>Sample 2</span><span>Sample 3</span><span>Sample 4</span><span>Sample 5</span><span>Sample 6</span><span>Sample 7</span><span>Sample 8</span><span>Sample 9</span><span>Sample 10</span>
<!--/ #ticker--></div>

<!--/ .wrap--></div>
<!--/ .container--></div>

この用になるのでCSSは上記ソースを参考に装飾して下さい。

.container {
	width: 500px;
	padding: 10px;
	margin: 40px; 
	border: 3px solid #999;
	text-align: left;
}
.container .wrap {
	position: relative;	
	border: 1px solid #CCC;
	padding: 5px;
	overflow: hidden;
}
#ticker {
    position: relative;
}
#ticker span {
	padding-right: 20px;
}

上記CSSで指定されているwidth、padding、margin、borderは好きな数値で構いません。

demo page

Comments

nebura

nebura

こんにちは。
文字の代わりに画像を流して、スライドショー的に使わせていただきました。

cssも分かりやすくとても参考になりました。
ありがとうございます。

2009年09月27日 21:42

MIYA

MIYA

失礼しました…

教えて頂きありがとうございます!

2009年03月24日 04:19

Y.

Y.

下のデモがリンクされていないようです。

2009年03月23日 23:07

MIYA

MIYA

cyokodogさんいつもありがとうございます^^

修正しておいたの今は大丈夫です。

2009年03月23日 14:52

cyokodog

cyokodog

IE6 で見ると枠からはみ出して表示されてしまうようです。

2009年03月23日 09:26

Comment Form

※コメントが認証されるまで、コメントは反映されません。ご了承くださいませ。


(公開されません)
 
Captcha

画像の中に見える文字を入力してください。

page top へ

Sponsor

  • heteml
  • Movable Type

Category

Recent Article

2011 04-05
iPhone スマートフォンサイトのデザインのまとめ
2011 04-04
スマートフォン対応にしてみました
2011 04-01
CSS3 要素を透明に出来る Opacity と RGBa の使い方
2011 03-31
サイトリニューアルしました
2010 12-01
CSS3 でボタンを作る為のテクニック、サンプル集
2010 11-24
綺麗でリッチなフッターデザイン集のまとめ 60
2010 11-18
緑と黒色を使った Webデザインのサイト 25
2010 11-10
知っておいた方が便利なエクセルの知識

Recent Comments

Archive

2011年
2010年
2009年
2008年

Related Article