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

Category ：
Javascript

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

…ここからが続き

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は好きな数値で構いません。

Comments