いろいろな動きをするニュースティッカー(News Ticker) jQueryプラグイン

仕様

• いまのところ4つの動きを指定できます。
• ページに複数設置できます。（違う動きでもOK！）
• スマートフォンでも使える。

使い方

head内でjQueryとTickerを読み込むだけです。jQueryを先に読み込んでください。

注意 : HTMLとsmoothAnchor.jsの文字コードをあわせてください。

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/ticker.js"></script>

それぞれ動きによってtypeの部分を変更してください。

/*通常*/
$(".ticker li").newsTicker({type:"normal"});
/*素早くティッカー*/
$(".ticker li").newsTicker({type:"move1"});
/*フェイドインフェイドアウト*/
$(".ticker li").newsTicker({type:"fade"});
/*縦移動*/
$(".ticker li").newsTicker({type:"longitudinally"});

HTML

HTMLはulでリストをつくりclass="ticker"で囲ってください。

<div class="ticker" id="ticker">
	<ul>
		<li>110101 ニュース1</li>
		<li>110202 ニュース2</li>
		<li>110303 ニュース3</li>
		<li>110404 ニュース4</li>
	</ul>
</div>

CSS

.tickerのwidthとposition: relative;とoverflow: hidden;の部分は重要です！（次に出てくる文字などが上手く隠れるようになっています。）

その他の部分はデザインに合わせてカスタマイズしてください！

div.ticker {
	margin: 20px;
	width: 600px;
	position: relative;
	overflow: hidden;
	border: 1px solid #369;
}

div.ticker ul {
	height: 1.6em;
}

div.ticker ul li {
	float: left;
	display: inline;
	clear: both;
	text-align: left;
	list-style-type: none;
	position: relative;
	line-height: 1.6em;
	margin-bottom: -1.6em;
}


div#longitudinally ul li,
div#fade ul li {
	left: 10px;
}

動きによって使える設定（引数）

通常（normal）

• speed : スピード調節

素早くティッカー通常（move1）

• speed1 : 出てくる時のスピード調節
• speed2 : 引っ込んでいくときののスピード調節
• delay1 : 出終わった後引っ込むまでの時間
• delay2 : 引込み終わった後次がでてくるまでの時間
• easing : 最初出てくる時のeasing（easingはスムーズアンカーと同じものを使っているので参考にしてください。）

フェイドインフェイドアウト（fade）

• delay : 次が出てくるまでの時間

縦移動（longitudinally）

• delay : 次が出てくるまでの時間

/*素早くティッカー*/
$(".ticker li").newsTicker({type:"move1",speed1:1000,speed2:100,delay1:100,delay2:200,easing:"easeOutBounce"});

今後の課題

• 可変サイズでウィンドウサイズを変更しても大丈夫なようにする。
• 動きのバリエーションを増やす。
• 「戻る」「次へ」ボタン追加。

あったらいいなぁー・・。って思ってるだけです・・。難しい＾＾；