SOFTELメモ Developer's blog

会社概要 ブログ 調査依頼 社員募集 ...

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

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

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

news-ticker

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

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

HTML

<ul id="newsTicker">
<li>ニュース1111111111</li>
<li>ニュース2222222222</li>
<li>ニュース3333333333</li>
<li>ニュース4444444444</li>
<li>ニュース5555555555</li>
<li>ニュース6666666666</li>
<li>ニュース7777777777</li>
<li>ニュース8888888888</li>
<li>ニュース9999999999</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


関連するメモ

コメント