ニュースティッカーの表示で使いやすい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”]
SHARE
PROFILE
入江 慎吾
Webサービスを作るのが大好きです。制作会社10年→フリーランス→受託をやめサービス開発に専念。プログラミングのメンターサービスMENTAは月間流通額約1,300万を突破🚀 YouTubeでは個人開発について語ってます / 「自分のサービスで生きていく」をコンセプトに個人開発オンラインサロン「入江開発室」を運営（詳しいプロフィール）
Webサービスを作るのが大好きです。制作会社10年→フリーランス→受託をやめサービス開発に専念。プログラミングのメンターサービスMENTAは月間流通額約1,300万を突破🚀 YouTubeでは個人開発について語ってます / 「自分のサービスで生きていく」をコンセプトに個人開発オンラインサロン「入江開発室」を運営（詳しいプロフィール）
