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

株価の表示みたいなニュースティッカーJavaScript「jStockTicker plugin」

｜ ｜ ｜ ｜ ｜ ｜ ｜

株価が流れて表示されるように、一列で情報を流し続けることで、注目を得られます。
また、多くの情報提供することができます。
JavaScriptライブラリのjQueryプラグインのjStockTicker pluginで簡単に導入可能です。

使用方法
jStockTicker pluginからjquery.jstockticker-1.1.jsをjQueryからjquery.jsをダウロードします。
<script type="text/javascript" src="jquery-1.3.2.js"></script>
<script type="text/javascript" src="jquery.jstockticker-1.1.js"></script>
<script>
$(function() {
$("#id名").jStockTicker({interval: 30});
});
</script>

さらにCSSを以下のように記述します。
.container {width: 735px;}
.container .wrap {width: 720px;left: 10px;top: 10px;overflow: hidden;position: relative;}
#ticker {position: relative;}

最後に上記で指定したid内に流したい情報を書き込めば完成です。
<div id="ticker">
流したい情報
</div>

株価の表示みたいなニュースティッカーJavaScript「jStockTicker plugin」サンプル

記事作成：2009年03月14日

前の記事：画像に奥行き感をもたせられるJavaScript「mParallax」
次の記事：マウスオーバーでもタブメニューを開閉できるJavaScript「SkiyoTabs」