Result
1行
3行
jQuery
function ticker(){
//最初のアイテムから順にスライドアップ
$('#news li:first').slideUp( function(){
$(this).appendTo($('#news')).slideDown();
});
}
//setInterval()で要素を繰り返し呼び出す
setInterval(function(){ticker()}, 5000);
css
a { color: #e8d421; text-decoration: none; }
a:hover { color: #e82134; }
.ticker {
width: 600px;
height: 60px;/*ここを変えれば表示するアイテム数を変更できる*/
overflow: hidden;
margin: 60px 0 0 35px;
padding: 0;
list-style: none;
text-shadow: 0px 1px 1px #000;
font-size: 25px;
}
.ticker li {
height: 60px;
padding: 5px;
margin: 0px 5px;
}
html
<ul id="news" class="ticker">
<li>Item01</li>
<li>Item02</li>
<li>Item03</li>
<li>Item04</li>
</ul>
via
NEWS TICKER IN 4 LINES OF JQUERY
[myphp file=’jquery-other-snippets’]
