SQLの窓

2013年11月14日


ブログの記事部分でロードする為の jQuery 用のコード

Google のホスティング使ってるので誰でも使えます。
1ページに二回実行されても、最初しかロードされません
<script>
if ( window[window.location.hostname+'.loadjQuery'] !== true ) {
	window[window.location.hostname+'.loadjQuery'] = true;
	document.write("<"+"script src=\"//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js\"></"+"script>");
}
</script>



posted by at 03:08 | jQuery | このブログの読者になる | 更新情報をチェックする


2013年11月10日


jQuery(実装) + Three.js(実行) で画像を『飛ばす』

内容は Three.js なんでそれなりに複雑ですが、実装は目一杯 jQuery を使うサンプルです。

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<style>
.bird img {
	border: solid 0px #000000;
	cursor:pointer;
}
</style>
<script>
// IFRAME に three.js を書き込み
function strat_birds(url) {
	var str;
	str="<"+"script type=\"text/javascript\" src=\"http://homepage2.nifty.com/lightbox/three/three.min57.js\"></"+"script>";
	$("#birds")[0].contentWindow.document.write(str);

	str="<"+"script type=\"text/javascript\">image_url='"+url+"';</"+"script>";
	$("#birds")[0].contentWindow.document.write(str);

	str="<"+"script type=\"text/javascript\" src=\"http://homepage2.nifty.com/lightbox/three/birds.js\"></"+"script>";
	$("#birds")[0].contentWindow.document.write(str);
	$("#birds")[0].contentWindow.document.close();
}

// イベント登録
$(function(){
	// 飛ばす画像の変更
	$(".birds img").each(function(){
		$(this).click(function(){
			strat_birds($(this)[0].src);
		});
	});
	// 背景画像の変更
	$("#back_image").change(function(){
		$("#birds").css("background-image","url("+ $(this).val() + ")");
	});
});
</script>
<div class="birds">
<img src="http://lh6.googleusercontent.com/-rALYQbtofec/UU2QP5kdd2I/AAAAAAAAMa0/btK53_S7RSc/s60/wing.png">

<img src="http://lh6.googleusercontent.com/-ee7i9HqCPvo/UVHqU36hnAI/AAAAAAAAMc0/r78cSNjeu8g/s60/_img.png">

<img src="http://lh5.googleusercontent.com/-AinOaWGth88/UVHj_A27xzI/AAAAAAAAMcs/_vJj9Koxq2s/s60/_img.png">

<img src="http://lh3.googleusercontent.com/-4Em5315jEAI/T_GVyEMF5BI/AAAAAAAAHBg/s78i3fY94vU/s60/Black_Eagle_Miku_Elf4.png">

<input type="button" value="表示終了" onclick='$("#birds")[0].src="about:blank"'>
<div style='margin-top:8px;'>
<iframe
	src="about:blank"
	id="birds"
	name="birds"
	scrolling="no"
	width="600"
	height="400"
	marginwidth="0"
	marginheight="0"
	style='border:solid #000000 1px;background:url(https://lh5.googleusercontent.com/-kG1CdBL0URQ/UmfPT4ki9dI/AAAAAAAAQ1U/ObGLimpi1LM/s600/UrbanFuture4_1.jpg);'
></iframe>
</div>
<select id="back_image">
<option value="https://lh5.googleusercontent.com/-kG1CdBL0URQ/UmfPT4ki9dI/AAAAAAAAQ1U/ObGLimpi1LM/s600/UrbanFuture4_1.jpg">背景1</option>
<option value="https://lh4.googleusercontent.com/-1hrl6J4BkAI/UmfOlBCk8VI/AAAAAAAAQ08/2QbL_BEtAjA/s600/UrbanFuture3_1.jpg">背景2</option>
<option value="https://lh3.googleusercontent.com/-9od0_nU2LJ4/UmfPTUVaiOI/AAAAAAAAQ1Q/l8HAXIYwJWg/s600/UrbanFuture3_2.jpg">背景3</option>
<option value="https://lh6.googleusercontent.com/-p5zol_txEGA/UmfPTqtwgEI/AAAAAAAAQ1Y/bWF-UJdFQbQ/s600/UrbanFuture4_2.jpg">背景4</option>
</select>
</div>


posted by at 04:07 | jQuery | このブログの読者になる | 更新情報をチェックする



JS : ページの最後へスクロール( Math.max.apply でページ長さを取得 )

以下の4つのうちの一番大きいものを使って、window.scroll を実行します
1) document.body.clientHeight
2) document.body.scrollHeight
3) document.documentElement.clientHeight
4) document.documentElement.scrollHeight
<script>
function scrollBottom() {
	var target = [document.body.clientHeight,document.body.scrollHeight,document.documentElement.clientHeight,document.documentElement.scrollHeight];
	var top = Math.max.apply( null, target );
	window.scroll(0,top);
}
</script>
<input
	type="button"
	value="スクロール"
	onclick='scrollBottom();'
>

Function オブジェクトの apply メソッド

apply メソッドは、第一引数を省略して、第二引数に配列を指定して実際の引数に引き渡す方法です。
( Math.max は関数なので )


posted by at 01:50 | JavaScript | このブログの読者になる | 更新情報をチェックする