【jQuery】要素を出したりしまったり出来るサンプルコード[drawerblock.js]

サイドに隠した要素を、ボタンを押す事によって出したりしまったりする事が出来る(スクロール表示)サンプルコード[drawerblock.js]を作ってみた。

⇒デモ

【手順1】

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

var switch_val = "off";	  

$(function(){
	var wh = $(document).height();
		
	$(block_pass).css("height", wh+"px");
		
	$(open_pass).click(function(){
		if(switch_val == "off"){
			$(block_pass).animate({"right": "0"}, "slow", function(){
				switch_val = "on";
			});
		}else if(switch_val == "on"){
			$(block_pass).animate({"right": "-290px"}, "slow", function(){
				switch_val = "off";
			});
		}
	});
		
	$(close_pass).click(function(){
		if(switch_val == "off"){
			$(block_pass).animate({"right": "0"}, "slow", function(){
				switch_val = "on";
			});
		}else if(switch_val == "on"){
			$(block_pass).animate({"right": "-290px"}, "slow", function(){
				switch_val = "off";
			});
		}
	});
	
	$(block_pass).mouseover(function(){
		if(switch_val == "off"){
			$(block_pass).animate({"right": "0"}, "slow");
				switch_val = "on";
		}
	});
});

【手順2】

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

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

【手順3】

htmlファイルbodyタグ内にスクロール表示要素を記述する。

<article class="block">
	<p class="buttonClose"><button id="blockClose">Close</button><p>
	<ul>
		<li>1.[ボタン]を押すと要素を開閉できます。</li>
		<li>2.[Close]を押すと要素を収納できます。</li>
		<li>3.要素にマウスをのせても引き出せます。</li>
	</ul>
</article>

【手順4】

htmlファイルheadタグ内に下記のスクリプトを記述する。
block_passにスクロール表示要素のパス、open_pass/close_passにボタンのパスを設定する。

<script>
// スクロール表示要素のパス
var block_pass = "article.block";
// ボタンパス
var open_pass = "#blockOpen";
var close_pass = "#blockClose";
</script> 

【手順5】

最後に、cssで初期ポジション指定値やスクロールバーの指定をしてあげれば完了

html, body{
	/* スクロールバー用 */
	overflow-x: hidden;
}

#contents{
	/* スクロールバー用 */
	overflow: hidden;
}

article.block{
	float: right;
	width: 300px;
	color: #ffffff;
	/* 各ブラウザ用透過背景 */
	background: #000000;
	filter: alpha(opacity=70);
	-moz-opacity:0.7;
	opacity:0.7;
	background-color: rgba(000, 000, 000, 0.7);
	/* 初期ポジション指定値 */
	position: absolute;
	top: 0;
	right: -290px;
}

p.buttonClose{
	text-align: right;
	padding: 10px;
}

【完成】

⇒デモ

jQuery要素スクロール

【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ランダムフェード