リスト(li)タグ要素をsetTimeoutとfadeOut・fadeInを使って、1行切替NEWSの様に表示させる方法をご紹介します。
1行で複数のリストタグを切替表示することでページ内のスペースを有効活用できます。
Contents
ディスプレイ広告
setTimeoutを使って複数のリストタグを1行切替NEWSの様に表示する方法CSSの記述
※リストタグ(#idNews li)のCSS記述です。必要に応じて変更して下さい。
<style type="text/css"> <!-- body{ margin:0; padding:0; } h1{ font-size:16px; font-weight:normal; line-height:2.0em; text-align:center; padding:15px 0; } #idWrap{ width:600px; margin:0 auto; text-align:center; } #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>
リスト(li)タグ要素をsetTimeoutとfadeOut・fadeIn使って、1行切替NEWSの様に表示させるJavaScriptの記述
※jquery.min.jsファイルを読み込みます。リストタグ(#idNews li)の数が1つ以上の場合、fncnews()関数を実行します。fncnews()ではリストタグ(#idNews li)の初めの要素を非表示にしてfadeOut・fadeInで要素を追加・削除します。setTimeoutでこの処理を繰り返します。
<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>
setTimeoutを使って複数のリストタグを1行切替NEWSの様に表示する方法HTMLの記述
※リスト(li)タグを複数用意してます。必要に応じて変更して下さい。
<div id="idWrap"> <h1>リスト(liタグ)の情報を1行ずつ切替えて表示します</h1> <div id="idNews"> <ul class="xoxo categories"> <li class="cat-item cat-item-36"><a href="https://dad-union.com/category/css">css</a></li> <li class="cat-item cat-item-2"><a href="https://dad-union.com/category/javascript">JavaScript</a></li> <li class="cat-item cat-item-3"><a href="https://dad-union.com/category/jquery">jQuery</a></li> <li class="cat-item cat-item-53"><a href="https://dad-union.com/category/php">PHP</a></li> </ul> </div><!--/idNews--> </div><!--/idWrap-->
liタグの情報を1行でずつ切替えて表示するデモページ
※流用される場合は自己責任でお願いします。
デモページheadタグ内のGoogleアナリティクスタグは流用しないで下さい。