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

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

背景1 背景2 背景3 背景4

<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>