ニュースティッカーをjQueryプラグイン「News Ticker Pro」で作る

お知らせをいっぱい表示させたいが、スペースの都合もある。
そんな時ニュース系サイトでよく見られる1件1件ニュースを表示するニュースティカーを使うと便利です。
JavaScriptライブラリjQueryのプラグイン「News Ticker Pro」で簡単に設置できます。

sponsors

使用方法

News Ticker Proからファイ一式がダウロードできます。

<link rel="stylesheet" href="jnewstickepro.css" type="text/css" media="screen" />
<script src="jquery-1.3.js" type="text/javascript"></script>
<script src="jeffects.js" type="text/javascript"></script>
<script src="effects.slide.js" type="text/javascript"></script>
<script type="text/javascript">			
	var infoStrArr = [
		"ニュース1",
		"ニュース2<a href=\"/test/index.html\">リンク</a>"
		];
	var slideInfoBar;
	$(function () {			
		slideInfoBar = new pEffectsSlide(
			"#slider #content(表示する場所)",
			infoStrArr,
			{p: "#pLink", n: "#nLink", a:"#aLink"}
			);
	});
</script>
あとは表示する場所に記述した要素を以下のように含めれば完成です。

<div class="EffectsSlider">
	<a href="#" id="pLink"></a>
	<a href="#" id="nLink"></a>
	<div id="slider"><p id="content"></p></div>
	<a href="#" id="aLink" class="active"></a>
</div>

サンプル

sponsors

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