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

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

｜ ｜ ｜ ｜ ｜ ｜ ｜

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

使用方法
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 = [
"ニュース１",
"ニュース２<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>

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

記事作成：2009年02月14日

前の記事：フォーム入力内容に近い言葉だけ表示するjQueryプラグイン「flexselect」
次の記事：目をひきつけるニュースティッカー：jQueryプラグイン「BBC style news ticker」