リスト(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アナリティクスタグは流用しないで下さい。