ニュースティッカーの表示で使いやすいJQueryプラグイン「JQUERY NEWS TICKER」
ニュースティッカーというのは、1行表示で文字が流れてくるアレのことです。JQueryで探すといろいろなものがでてきましたが、いくつか試してみて使いやすかったのは「JQUERY NEWS TICKER」でした。
どんなティッカー？
下のように文字が流れてきます。表示中のデザインは癖があるので、そのまま使うのは…ですが、CSSも単純ですので自由にカスタマイズできました。
まずはJQUERY NEWS TICKERサイト内の、「DOWNLOAD NOW」ボタンからソースコード一式をダウンロードします。
設置方法
ダウンロードしたフォルダ内には、不要なファイルも含まれていますが、必要なのは
<link href="styles/ticker-style.css" rel="stylesheet" type="text/css" /> <script src="includes/jquery.ticker.js" type="text/javascript"></script>
の2つです。もちろん事前にJQueryは読み込ませておいてください。
そして表示させるTIPS。
<ul id="js-news" class="js-hidden">
<li class="news-item"><a href="#">This is the 1st latest news item.</a></li>
<li class="news-item"><a href="#">This is the 2nd latest news item.</a></li>
<li class="news-item"><a href="#">This is the 3rd latest news item.</a></li>
<li class="news-item"><a href="#">This is the 4th latest news item.</a></li>
</ul>
あとは、実行。
<script type="text/javascript">
$(function () {
$('#js-news').ticker();
});
</script>
まずは、これで動作します。
オプション
よく使いそうなオプションだけ抜粋紹介。
speed: 0.10 …ティッカーの表示スピードです。
controls: true …停止、再生、次へ、前へのボタンを表示するかどうか
titleText: ‘Latest’ …ティッカーのタイトル
pauseOnItems: 2000 …次のティッカーを表示するまでの時間
CSSやJQuery本体もシンプルなので、カスタマイズしやすいと思います。
[sc name=”engeneer”]