2013年03月27日


Three.js : 60x60 画像の飛翔

アイコン画像をコリックすると、その画像が飛翔します。


<img src="http://lh6.googleusercontent.com/-rALYQbtofec/UU2QP5kdd2I/AAAAAAAAMa0/btK53_S7RSc/s60/wing.png" style="border: solid 0px #000000;cursor:pointer;margin-right:14px;" onclick='strat_birds(this.src)' />

<img src="http://lh3.googleusercontent.com/-4Em5315jEAI/T_GVyEMF5BI/AAAAAAAAHBg/s78i3fY94vU/s60/Black_Eagle_Miku_Elf4.png" style="border: solid 0px #000000;cursor:pointer;margin-right:14px;"  onclick='strat_birds(this.src)' />

<img src="http://lh5.googleusercontent.com/-AinOaWGth88/UVHj_A27xzI/AAAAAAAAMcs/_vJj9Koxq2s/s60/_img.png" style="border: solid 0px #000000;cursor:pointer;margin-right:14px;"  onclick='strat_birds(this.src)' />

<input type="button" value="表示終了" onclick='document.getElementById("birds").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;'
></iframe>
</div>
<script type="text/javascript">
function strat_birds(url) {
	var str;
	str="<"+"script type=\"text/javascript\" src=\"http://lightbox.in.coocan.jp/three/three.min57.js\"></"+"script>";
	document.getElementById("birds").contentWindow.document.write(str);

	str="<"+"script type=\"text/javascript\">image_url='"+url+"';</"+"script>";
	document.getElementById("birds").contentWindow.document.write(str);

	str="<"+"script type=\"text/javascript\" src=\"http://lightbox.in.coocan.jp/three/birds.js\"></"+"script>";
	document.getElementById("birds").contentWindow.document.write(str);
	document.getElementById("birds").contentWindow.document.close();
}
</script>




posted by at 2013-03-27 02:47 | Comment(0) | そのまま使えるHTMLコード | このブログの読者になる | 更新情報をチェックする