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

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

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

sponsors

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

記事作成:
記事URL:

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