skuare.netはJavaScriptライブラリのjQuery,mootools,prototypeのプラグインを中心にWebサイト構築に関する技術を試す個人サイトです

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

｜ ｜ ｜ ｜ ｜ ｜ ｜

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

使用方法
jTickerからjquery.ticker.jsをjQueryからjquery.jsをダウロードします。
<script type="text/javascript" src="jquery-1.3.2.js"></script>
<script type="text/javascript" src="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名">
//１ページ目
<div>
<p>テキスト</p>
<a class="next" href="#">next</a>
</div>
//１ページ目ここまで
</div>

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

記事作成：2009年04月02日

前の記事：フォントをJavaScriptで着飾る「JQuery FontEffect plugin」
次の記事：jQueryでマウスオーバーを印象的にする：jQuery Animated Menu