jQueryでさくっとニュースティッカーを作るチュートリアル
- May 27th, 2009
- Posted in jQuery関連
- Write comment
ちょっと個人的なメモ。いつか使いたい。jQueryで上に流れていくニュースティッカーを作るチュートリアルですね。
↑ こういうやつ。
ステップごとに何をすべきかが詳細に説明されていてわかりやすいですね。最終的に出来たコードも美しい感じです。
<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
No comments yet.