リスト(liタグ)の情報を1行ずつ切替えて1行ニュースの様に表示する方法



リスト(liタグ)の情報を1行ずつ切替えて、
1行ニュースの様に表示させます。

1.CSSの記述例

<style type="text/css">
<!--
#idNews{
	border:solid 1px #CCCCCC;
	width:370px;
	margin:0 auto;
	text-align:left;
}
#idNews ul {
  height: 25px;
  line-height: 25px;
  overflow: hidden;
}
#idNews li {
	list-style-position:inside;
	list-style-type:none;
}
#idNews li a{
	text-decoration:underline;
	color:#333333;
}
#idNews li a:hover{
	text-decoration:underline;
	color:#666666;
}
-->
</style>



2.JavaScriptの記述例

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
	function fncnews() {
		setTimeout(function() {
			fncnews();
			$("#idNews li").not(':first').css('display', 'none');
			$("#idNews li:first").fadeOut('normal', function() {
				$(this).next().fadeIn('normal');
				$(this).clone().appendTo("#idNews ul");
				$(this).remove();
			});
		}, 2000);
	}
	var n_size = $("#idNews li").size();
	if(n_size > 1) {
		fncnews();
	}
});
</script>



3.HTMLの記述例

    <div id="idNews">
    <ul class="xoxo categories">
    <li><a href="/category/css" title="CSS に含まれる投稿をすべて表示" target="_blank">CSSに関するお知らせ</a></li>
    <li><a href="/category/facebook" title="Facebook に含まれる投稿をすべて表示" target="_blank">Facebookに関するお知らせ</a></li>
    <li><a href="/category/html5" title="HTML5 に含まれる投稿をすべて表示" target="_blank">HTML5に関するお知らせ</a></li>
    <li><a href="/category/javascript" title="JavaScript に含まれる投稿をすべて表示" target="_blank">JavaScriptに関するお知らせ</a></li>
    <li><a href="/category/php" title="PHP に含まれる投稿をすべて表示" target="_blank">PHPに関するお知らせ</a></li>
    <li><a href="/category/seo" title="SEO に含まれる投稿をすべて表示" target="_blank">SEOに関するお知らせ</a></li>
    <li><a href="/category/wordpress" title="WordPress に含まれる投稿をすべて表示" target="_blank">WordPressに関するお知らせ</a></li>
    <li><a href="/category/sonohoka" title="その他 に含まれる投稿をすべて表示" target="_blank">その他に関するお知らせ</a></li>
    <li><a href="/category/smartphone" title="スマートフォン に含まれる投稿をすべて表示" target="_blank">スマートフォンに関するお知らせ</a></li>
    </ul>
    </div><!--/idNews-->

liタグの情報を1行でずつ切替えて表示するデモページ

如何にしてページのスペースを効率的に使うかになってきますよね。