シンプルなニュースティッカー

Tweet

Category JavaScript / Tagged jQuery 2011/12/15

ニュースを電光掲示板のように表示するニュースティッカーです。

気づいて欲しい情報や、にぎやかな感じを出すため、限られたスペースで表示をローテーションするためなどに使えます。

jQueryとjQueryUIの機能を少し使ってシンプルに作れます。

jQueryUIを使っているのは、左右のスライドができるからです。上下のスライドの動きでよければ、jQueryUIなしで作れます。

HTML

<ul id="newsTicker">
<li>ニュース１１１１１１１１１１</li>
<li>ニュース２２２２２２２２２２</li>
<li>ニュース３３３３３３３３３３</li>
<li>ニュース４４４４４４４４４４</li>
<li>ニュース５５５５５５５５５５</li>
<li>ニュース６６６６６６６６６６</li>
<li>ニュース７７７７７７７７７７</li>
<li>ニュース８８８８８８８８８８</li>
<li>ニュース９９９９９９９９９９</li>
</ul>

JavaScript

$(function(){
	$('#newsTicker li').hide();
	function newsTicker() {
		$('#newsTicker li:eq(4)').hide("slide", {direction: "left"}, 1000);
		$('#newsTicker li:last').prependTo('#newsTicker').show("slide", {direction: "right"}, 1000);
	}
	setInterval(newsTicker, 1500);
});

CSS

見た目はスタイルシートで調整。

DEMO

• 日産「GT-R」2012年モデル
• 写真で見るマセラティ「グラントゥーリズモ MC ストラダーレ」
• 【第52回】別荘地軽井沢で古き良き洋食を、の巻
• 東芝、世界最高水準94%の効率を実現したエネファーム
• 東北電力、初のメガソーラー「八戸太陽光発電所」運転開始
• 東北電力、震災被害の仙台火力発電所4号機が試運転開始
• ペンタックス「K-5」「K-7」「MX」のミニチュアマスコット
• ホンダ、大型クルーザー VT1300 シリーズのカラーリングを変更
• ホンダ、大型クルーザーモデル シャドウファントム のカラーリングを変更
• オーテックジャパン、セレナ などのエアロシリーズを発売
• トヨタ アイシス に特別仕様…両側パワースライドドアを装備
• スバル エクシーガに特別仕様…上質感を向上
• 【スズキ スイフトスポーツ 新型発表】インテリアも上質な大人のスポーティさで
• ホンダ、ロードスポーツモデル VT750S のカラーリングを変更