【jQuery】要素をランダムで表示するサンプルコード[randombloom.js]

複数の要素(ブロック・インライン要素)をランダムでフェードをかけて表示するサンプルコード[randombloom.js]を作ってみた。

⇒デモ

【手順1】

下記のコードをjsファイル(randombloom.js)として保存する。

$(function(){
		   
	var css = block_pass+"{display: none;}";

    $("head").append("<style>"+css+"</style>");

	$(window).load(function(){
		var val = 1;
		var testTimer;
		var arr = [];
		for(var i=1; i<=block_num; i++){
			arr.push(i);		
		}		
		var aaa = $(block_pass).size();
		arr = shuffle(arr);
		startTimer(val, arr);
	
	});
	
	// タイマー処理関数
	function startTimer(val, arr){
		testTimer = setInterval(function(){
			if(val <= $(block_pass).size()){
				var zero = ("00"+arr[(val-1)]).slice(-2);
				var rand_val = block_pass+".block"+zero;
				$(rand_val).fadeIn("slow").css("display","block");
				val++;
			}else{
				clearInterval(testTimer);
			}	
		}, fast_num);
	}
	
	// タイマーをストップする関数
	function stopTimer(){
		clearInterval(testTimer);
	}
	
	// 配列の中身をシャッフルする関数
	function shuffle(list){
		var i = list.length;
		while(--i){
			var j = Math.floor(Math.random() * (i + 1));
			if(i == j) continue;
			var k = list[i];
			list[i] = list[j];
			list[j] = k;
		}
		return list;
	}
});

【手順2】

htmlファイルにjqueryと先ほど保存したrandombloom.jsを呼ぶ出す。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="js/randombloom.js"></script>

【手順3】

htmlファイルbodyタグ内にランダムで表示したい要素を記述する。

<div id="contents">
	<ul id="block">
		<li><span class="block01">block01</span></li>
		<li><span class="block02">block02</span></li>
		<li><span class="block03">block03</span></li>
		<li><span class="block04">block04</span></li>
		<li><span class="block05">block05</span></li>
		<li><span class="block06">block06</span></li>
		<li><span class="block07">block07</span></li>
		<li><span class="block08">block08</span></li>
		<li><span class="block09">block09</span></li>
		<li><span class="block10">block10</span></li>
		<li><span class="block11">block11</span></li>
		<li><span class="block12">block12</span></li>
		<li><span class="block13">block13</span></li>
		<li><span class="block14">block14</span></li>
		<li><span class="block15">block15</span></li>
		<li><span class="block16">block16</span></li>
		<li><span class="block17">block17</span></li>
		<li><span class="block18">block18</span></li>
		<li><span class="block19">block19</span></li>
		<li><span class="block20">block20</span></li>
	</ul>
</div>

【手順4】

最後にhtmlファイルheadタグ内に下記のスクリプトを記述する。
block_numに要素の数、fast_numに速度(ミリ秒)、block_passに要素のパスを設定する。

<script>
// 表示する要素の数
var block_num = 20;
// 表示する速度
var fast_num = 80;
// ランダム表示する要素のパス
var block_pass = "ul#block li span";
</script> 

【おまけ】

cssでレイアウトもデザインしましょう。

#contents ul#block li{
	float: left;
	width: 100px;
	height: 100px;
}

#contents ul#block li span{
	width: 100px;
	height: 100px;
	line-height: 100px;
	background: #000000;
	color: #ffffff;
	text-align: center;
}

【完成】

⇒デモ

jQueryランダムフェード

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>