印象的なニュースティッカーを作れるJavaScript「jTicker」

情報を流れるように表示するニュースティッカーは多々ありますが、わりと画一的でした。
jTickerを利用すると、印象的にすることができます。

sponsors

使用方法

jTickerからjquery.ticker.jsをjQueryからjquery.jsをダウロードします。

<script type="text/javascript" src="/test/js/jquery-1.3.2.js"></script>
<script type="text/javascript" src="/test/js/jquery.ticker.js"></script>
<script type="text/javascript">
$(document).ready(function(){
	$("#id名").ticker({
 		cursorList:  " ",
 		rate:        10,
 		delay:       4000
	}).trigger("play");
    
    $(".next").live("click", function(){
        $("#id名")
        .trigger({type: "play"});
        return false;
    });
});
</script>
上記を記述すると指定したid名でくくれば完成です。

<div id="id名">
	//1ページ目
	<div>
		<p>テキスト</p>
       		<a class="next" href="#">next</a>
	</div>
	//1ページ目ここまで
</div>

サンプル

ページ1

ページ1テキストページ1テキストページ1テキストページ1テキストページ1テキストページ1テキストページ1テキストページ1テキストページ1テキストページ1テキストページ1テキストページ1テキストページ1テキストページ1テキストページ1テキストページ1テキストページ1テキストページ1テキストページ1テキストページ1テキストページ1テキストページ1テキスト

ページ2

ページ2テキストページ2テキストページ2テキストページ2テキストページ2テキストページ2テキストページ2テキストページ2テキストページ2テキストページ2テキストページ2テキストページ2テキストページ2テキストページ2テキストページ2テキストページ2テキストページ2テキストページ2テキストページ2テキストページ2テキストページ2テキストページ2テキスト

ページ3

sponsors

Javascriptサンプルページ一覧
skuare.net