Home > jQuery関連 > jQueryでさくっとニュースティッカーを作るチュートリアル

jQueryでさくっとニュースティッカーを作るチュートリアル

2009-05-27 (Wed) 9:47
jQuery関連

ちょっと個人的なメモ。いつか使いたい。jQueryで上に流れていくニュースティッカーを作るチュートリアルですね。

news

↑ こういうやつ。

ステップごとに何をすべきかが詳細に説明されていてわかりやすいですね。最終的に出来たコードも美しい感じです。

<script type="text/javascript">
$(document).ready(function(){
	var first = 0;
	var speed = 700;
	var pause = 3000;
	function removeFirst(){
		first = $('ul#listticker li:first').html();
		$('ul#listticker li:first')
			.animate({opacity: 0}, speed)
			.fadeOut('slow', function() {$(this).remove();});
			addLast(first);
	}
	function addLast(first){
		# last = ''+
		first+'';
		$('ul#listticker').append(last)
		$('ul#listticker li:last')
			.animate({opacity: 1}, speed)
			.fadeIn('slow')
	}
	interval = setInterval(removeFirst, pause);
});</script>

↑ jQueryの勉強としてもいいですね。animate、マスターすると便利っすよね。

ご興味のある方はこちらからどうぞ。

» How to implement a news ticker with jQuery and ten lines of code