【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要素スクロール

コメントを残す

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

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