シンプルなニュースティッカー”SimpleTicker”の使い方

ウェブサイトを作成しているときに、大体一覧でお知らせやプレスリリースなどを標示することがあると思いますが
お客様からシンプルに余白を取らずに動きがある形で…とご要望があったので今回SimpleTickerを実装しました。

早速使い方です。

ファイル読込読み込み

GitHubからファイルをダウンロードします。

jquery.simpleTicker.js

上記でダウンロードしたファイルをhead内で読み込ませます。

<link rel="stylesheet" type="text/css" href="jquery.simpleTicker.css">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" src="jquery.simpleTicker.js"></script>

HTML

大枠を任意のIDを指定してソースを記述します。

<div id="newsticker" class="ticker">
<ul>
	<li><a href="#"><span>2009年07月08日</span>NEWS01</a></li>
	<li><a href="#"><span>2009年07月01日</span>NEWS02</a></li>
	<li><a href="#"><span>2009年06月28日</span>NEWS03</a></li>
</ul>
</div>

JS

書き方はいろいろあるようですが私は以下のソースで動きました。
エフェクトのタイプは「fade」「roll」「slide」のいずれかで変更できます。

$(function() {
	$.simpleTicker($('#newsticker'),{
		effectType:'roll'
	});
});

みなさんも実際にためしてみてくださいね♪

Share: