【jQuery】スマホサイトの背景画像を画面横幅に合わせてリサイズするサンプルコード

スマホサイトで画面の向きが変わる時に背景画像と画面の向きが変わった事によりリサイズされた親要素の大きさのズレを解消する処理を自作したのでメモ。

【仕様】
・画面の向き変更後に画面横幅を基準に、親要素と背景画像をリサイズする。

bg_resize

⇒デモ(スマホ実機で要確認)

【JS】

$(function(){
	var classBgResize = function(block_pass, sw) {
		var block_cnt = block_pass.length;
		var arr_img = new Array(block_cnt);
		var bg_img = new Array(block_cnt);
		var bg_img_name = new Array(block_cnt);
		
		for(var i=0 ; i<=(block_cnt-1) ; i++){
			bg_img[i] = block_pass.eq(i).css("background-image");
			bg_img_name[i] = bg_img[i].substring(4, bg_img[i].length - 1);
		
			arr_img[i] = new Image();
			arr_img[i].src = bg_img_name[i];
		}
		
		arr_img[(i-1)].onload = function(){
			var iw = new Array(block_cnt);
			var ih = new Array(block_cnt);
			var bw = new Array(block_cnt);
			var bh = new Array(block_cnt);
			var arr_h = new Array(block_cnt);
			var arr_w = new Array(block_cnt);
	
			var n = 0;
			$.each(arr_img, function(){
			
				iw[n] = arr_img[n].width;
				ih[n] = arr_img[n].height;
				bw[n] = block_pass.eq(n).width();
				bh[n] = block_pass.eq(n).height();
				
				n++;
			});
			$(window).resize((function(){
				resizeAction(block_pass, iw, ih, bw, bh, arr_h, arr_w, sw);
			}));
		}
		
		// リサイズ処理
		function resizeAction(block_pass, iw, ih, bw, bh, arr_h, arr_w, sw){	
			var cw  = $(this).width();
			
			for(var s=0 ; s<=(bw.length-1) ; s++){
				if(sw == cw){
					//alert("スタート時と同じ向き");
					arr_h[s] = bw[s]/iw[s]*ih[s];
					
					block_pass.eq(s).css({backgroundSize: "100%"});
					block_pass.eq(s).css("width", bw[s]+"px");
					block_pass.eq(s).css("height", arr_h[s]+"px");
				
				}else{
					//alert("スタート時と違う向き");
					arr_w[s] = (cw)*(bw[s]/sw);
					arr_h[s] = (cw/iw[s]*ih[s])*(bw[s]/sw);
					
					block_pass.eq(s).css({backgroundSize: "100%"});
					block_pass.eq(s).css("width", arr_w[s]+"px");
					block_pass.eq(s).css("height", arr_h[s]+"px");
				}
			}
		}
	}
	
	// クラス名と画面横幅初期値を代入
	var block_pass = $(".bg_resize");
	var sw = $(this).width();
	
	new classBgResize(block_pass, sw);
});

【HTML】

<div id="conteiner"> 
	<p class="aaa bg_resize">bg_resize_aaa</p>
	<p class="bbb bg_resize">bg_resize_bbb</p>
	<p class="ccc">no_resize_ccc</p>
</div>

【CSS】

#conteiner{
	width: 100%;
	margin: 0 auto;
}

.img_chenge img{
	width: 100%;
}

.aaa{
	width: 100%;
	background: url(../img/s_test_1.jpg) no-repeat; 
}

.bbb{
	width: 50%;
	background: url(../img/s_test_2.jpg) no-repeat; 
}

.ccc{
	width: 50%;
	background: url(../img/s_test_1.jpg) no-repeat; 
}

⇒デモ(スマホ実機で要確認)

【jQuery】リンクテキストがアニメーションするサンプル

めんまのお願いを叶えました。

danceText

⇒デモ

【JS】

$(document).ready(function(){
	var cnt_list;
	var arr_list = new Array();
	var arr_str = new Array();
	var txt_list = "*";
	var txt_return;
	var block_name = '#danceTextBlock ul li';
	
	cnt_list = $(block_name).children('a').length;
	for (var i=0; i<cnt_list; i++){
		arr_list[i] = $(block_name).find('a').eq(i).text();
		
		$(block_name).eq(i).find('a').html(function(){
			for (var j=0; j<arr_list[i].length; j++){
				if(txt_list == "*"){
					txt_list = '<span>'+arr_list[i].substr(j, 1)+'</span>';
				}else{
					txt_list = txt_list + '<span>'+arr_list[i].substr(j, 1)+'</span>';
				}
			}
			txt_return = txt_list;
			txt_list = "*";
			return txt_return;
		});
	}
	
	$(block_name).find('a').mouseover(function(){
		// 要素個数を取得
		var elem = $(this).find('span');
		var n = elem.length;

		// アニメーション
		var c = 0;
		var id = setInterval(function(){
			if(c <= (n-1)){
				elem.eq(c).stop(true, false).animate({'marginTop':'-4px'},'fast').animate({'marginTop':'0px'},'fast');
				c++;
			}else{
				c = 0;
				clearInterval(id);
			}
		}, 80);
	});
});

【HTML】

<div id="conteiner"> 
	<div id="danceTextBlock">
		<ul>	
			<li><a href="#">じんたん</a></li>
			<li><a href="#">めんま</a></li>
			<li><a href="#">あなる</a></li>
			<li><a href="#">ゆきあつ</a></li>
			<li><a href="#">つるこ</a></li>
			<li><a href="#">ぽっぽ</a></li>
		</ul>
	</div>
</div>

【CSS】

#danceTextBlock ul{
	width: 200px;
	list-style: none;
}

#danceTextBlock ul li{
	height: 42px;
	background: #000000;
	line-height: 42px;
}

#danceTextBlock ul li a{
	display: block;
	width: 200px;
	height: 42px;
	color: #ffffff;
	text-decoration: none;
}

#danceTextBlock ul li a span{
	display: block;
	float: left;
}

⇒デモ

【jQuery】何番目(n番目)の要素かを取得する

今回は、何番目(n番目)の要素がクリックされたかを取得します。

$(セレクタ).index(this);

index()関数で取得する値(リストの中のクリックした要素の番数)を変数に入れてアラートで表示します。

<script>
$(function(){
	// 要素を指定
	var sel = "ul#navi li";

	// 関数実行
	putNumber(sel);

	function putNumber(sel){
		$(sel).click(function(){
		  var index = $(sel).index(this);
			alert((index+1)+"番目");
		})	
	}
});
</script>
<ul id="navi">
	<li>block01</li>
	<li>block02</li>
	<li>block03</li>
	<li>block04</li>
	<li>block05</li>
	<li>block06</li>
	<li>block07</li>
	<li>block08</li>
	<li>block09</li>
	<li>block10</li>
</ul>

js_n_number

(index+1)としているのは、要素の開始が0番目からなので、わかりやすいように”+1″しています。

こっちの方が使いまわせるかも…(結果は同じです)

<script>
$(function(){
	var sel = "ul#navi li";
	
	$(sel).click(function(){
		// 関数実行
		var n_number = getNumber(sel, this);
		alert((n_number+1)+"番目");
	})	
	
	function getNumber(sel, target){
		var index = $(sel).index(target);
		return index;
	}
});
</script>

【jQuery】スマートフォン用の2階層アコーディオンのサンプルコード

いまさらながら、2階層アコーディオンを自作したのでメモ。
スマートフォン用なのでクリックした項目をトップにスクロールさせる機能も搭載しました。

⇒デモ

jqueryアコーディオン
【JS】

// タイトル
var list_title = "ul#accordionBlock h3.mainTrigger";
// サブリスト
var list_sub = "ul#accordionBlock li dl.subList";
// サブタイトル
var list_subtitle = "ul#accordionBlock li dl.subList dt";
// コンテンツ
var list_contents = "ul#accordionBlock li dl.subList dd";

$(function(){
	$(list_sub).hide().children("dd").hide();
	
	// 1階層目処理
	$(list_title).click(function () {
		funcClickEvent($(this), list_sub, list_title);					  
	});
	
	// 2階層目処理
	$(list_subtitle).click(function () {
		funcClickEvent($(this), list_contents, list_subtitle);					  
	});
	
    // funcScrollTop(現在地, 開閉要素, タイトル)
    function funcClickEvent(aaa, bbb, ccc){
		$(aaa).children("h4").toggleClass("opened");
		$(ccc).children("h4").not($(aaa).children("h4")).removeClass("opened");
		$(aaa).next(bbb).toggle();
		$(bbb).not(aaa.next(bbb)).hide();
		funcScrollTop(aaa, ccc);
    }

    // funcScrollTop(ボタン, リスト名)
    function funcScrollTop(aaa, bbb){
		var i = $(bbb).index(aaa)
		var p = $(bbb).eq(i).offset().top;			 
		$("html, body").animate({ scrollTop: p }, 'fast');
		return false;
    }
});

【HTML】

<ul id="accordionBlock">
	<li>
		<h3 class="mainTrigger mainTrigger01">大見出し1</h3>
		<dl class="subList">
		
			<dt class="SubTrigger subTrigger01"><h4 class="subTriggerIcon">中見出し</h4></dt>
				<dd>
					<h5 class="icon01">小見出し</h5>
					<p>テキスト</p>
				</dd>
	
			<dt class="SubTrigger subTrigger01"><h4 class="subTriggerIcon">中見出し</h4></dt>
				<dd>
					<h5 class="icon01">小見出し</h5>
					<p>テキスト</p>
				</dd>
			
			<dt class="SubTrigger subTrigger01"><h4 class="subTriggerIcon">中見出し</h4></dt>
				<dd>
					<h5 class="icon01">小見出し</h5>
					<p>テキスト</p>
				</dd>
		</dl>
	</li>
</ul>

⇒デモ

【jQuery】クリック連打対策でstop()メソッドを利用する

animateメソッドのクリック連打対策でstop()メソッドを利用する。

stop()メソッドはjqueryのリファレンスによると、“指定した要素集合から、現在動作中のアニメーション処理を全て中止します。”とありますが、意味が分からず、いろいろテストしたのでメモしておきます。

stop([clearQueue], [gotoEnd])

■第1引数[clearQueue]
┗trueの場合、全てのキューをクリアする。
■第2引数[gotoEnd]
┗trueの場合、現在のアニメーションを最終コマまで移動する。

stop() == stop(false, false)

引数は2つで、何も指定しないデフォルトの状態では“false”が指定される。

⇒デモ

テスト1【stop()なし】

$(function(){
	$("#button1").click(function(){
		$(".block1").animate({width: "50%"}, 500)
		.animate({width: "100%"}, 500);
	});
});


stop()なし

キューが削除されないので イベントが発生した回数分だけ実行される。

テスト2【stop() stop(false, false)】

$(function(){
	$("#button2").click(function(){
		$(".block2").stop(false, false).animate({width: "50%"}, 500)
		.animate({width: "100%"}, 500);
	});
});


stop(false, false)

アニメーション実行時にクリックされた場合、現在のアニメーションを停止。
第一引数[clearQueue]がfalseのため次のキューに移行する。

テスト3【stop(false, true)】

$(function(){
	$("#button3").click(function(){
		$(".block3").stop(false, true).animate({width: "50%"}, 500)
		.animate({width: "100%"}, 500);
	});
});


stop(false, true)

第二引数[gotoEnd]がtrueの場合、アニメーション実行時にクリックされた場合、現在のアニメーションを最終コマまで移動する。
第一引数[clearQueue]がfalseのため次のキューに移行する。

テスト4【stop(true, false)】

$(function(){
	$("#button4").click(function(){
		$(".block4").stop(true, false).animate({width: "50%"}, 500)
		.animate({width: "100%"}, 500);
	});
});


stop(true, false)

第一引数[clearQueue]がtrueのため全てのキューをクリア。

テスト5【stop(true, true)】

$(function(){
	$("#button5").click(function(){
		$(".block5").stop(true, true).animate({width: "50%"}, 500)
		.animate({width: "100%"}, 500);
	});
});


stop(true, true)

第一引数[clearQueue]がtrueのため全てのキューをクリア。
第二引数[gotoEnd]がtrueの場合、アニメーション実行時にクリックされた場合、現在のアニメーションを最終コマまで移動する。

テスト6【queue([]) + stop()】

アニメーション実行後にキューをクリアする方法

$(function(){
	$("#button6, .buttonAll").click(function(){
		$(".block6")
		.animate({width: "50%"}, 500)
		.animate({width: "100%"}, 500, function(){
			$(".block6").queue([]);
			$(".block6").stop();
		});
	});
});


queue([]) + stop()

アニメーションが終わった後にqueueメソッド(キューの配列を空にしてアニメーションをキャンセル)を実行する

【jQuery】animateでアニメーション中に新たに溜まった動作の処理をしない

jQueryのanimate関数でアニメーションが終了するまでにボタンを連打するなど、
何度もアニメーションを実行すると、不自然にアニメーションを繰り返す事がある。

これはアニメーション動作は、全てqueue(キュー)に溜まるので、
動作中に新たに溜まった動作を全ての動作が完了するまで実行し続ける為である。

アニメーションが終わった時点でqueueの中身を消すことで、
後続のアニメーション(動作中に新たに溜まった動作)が実行されないようにする。

【記述例】

$(this).animate({width: 10}, 100, function(){
	$(this).queue([]);		// queueを空にする
	$(this).stop();			// アニメーション停止
});

【jQuery】画像ロールオーバー時にフェイド変化するサンプルコード[rolloverfade.js]

画像ロールオーバー時にフェイドしながら変化するサンプルコード[rolloverfade.js]を作ってみた。

⇒デモ

【手順1】

ロールオーバーON時とOFF時の画像を準備する。
ON時の画像にはファイル名に“_on”を付けて保存する。

rolloverfade

【手順2】

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

$(function(){
	var selector_1 = 'ul.fadeBlock li';		// imgの親要素指定
	var selector_2 = 'fade_img';			// imgのclass指定
	var selector = selector_1 + ' img.'+ selector_2; 
	
	for (i=1; i<=$(selector_1).length; i++){
		$(selector_1 + ':nth-child(' + i + ') img').removeClass(selector_2).addClass(selector_2 + i);
		// 関数実行
		rollOverFadeEffect(selector + i);
	}

	// ユーザ定義関数
	function rollOverFadeEffect(selector){
		var change_img = $(selector).not('src=*' + '_on' + '.');
		change_img.each(function(){
			this.mouse_over_img = new Image();
			this.mouse_over_img.src = $(this).attr('src').replace(new RegExp('(\.gif|\.jpg|\.png)$'), '_on' + '$1');
			$(this.mouse_over_img).css({position: 'absolute', opacity: 0});
			$(this).before(this.mouse_over_img);
		
			$(this.mouse_over_img).hover(function(){
				$(this).animate({opacity: 1});
			},
			function(){
				$(this).animate({opacity: 0});
			});		
		});
	}
});

【手順3】

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

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

【手順4】

htmlファイルにロールオーバー時にフェイド変化させたい画像を記述し、
imgタグ内にクラス(ここではclass=”fade_img”)を記述する。

<div id="contents">
	<ul class="fadeBlock">
		<li><a href="#"><img class="fade_img" src="img/icon_ore.jpg" /></a></li>
		<li><a href="#"><img class="fade_img" src="img/icon_ore.jpg" /></a></li>
		<li><a href="#"><img class="fade_img" src="img/icon_ore.jpg" /></a></li>
		<li><a href="#"><img class="fade_img" src="img/icon_ore.jpg" /></a></li>
		<li><a href="#"><img class="fade_img" src="img/icon_ore.jpg" /></a></li>
	</ul>
</div>

【手順5】

最後にrolloverfade.js内の変数にセレクタを記述し代入する。
“selector_1″に”imgの親要素指定”、”selector_2″に”imgのclass指定”を設定する。

<script>
	var selector_1 = 'ul.fadeBlock li';		// imgの親要素指定
	var selector_2 = 'fade_img';			// imgのclass指定
</script> 

【完成】

rolloverfade02

⇒デモ

【jQuery】ユーザ定義関数の使い方

jQueryでPHPの様にユーザ定義関数を使いたいと思って調べてみら、
基本PHPと書き方が同じだったのでメモ。

【ユーザ関数の定義例】

$(function(){
	// ユーザ定義関数
	function putTextAlert(text){
		alert(text);
	}

	var text = "テキスト";

	// 関数実行
	putTextAlert(text);
});

もちろん関数の定義は最後にまとめてもOK!

$(function(){
	var text = "テキスト";

	// 関数実行
	putTextAlert(text);

	// ユーザ定義関数
	function putTextAlert(text){
		alert(text);
	}
});

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