SITEMAP [初めてのホームページ講座] [JavaScript , DHTML] [跳ねる物体]

跳ねる物体

機能

テキストや画像を画面下端で跳ね返らせるダイナミックHTMLです。跳ね返り方は物理学に乗っ取っていますので、違和感がありません。（ほんと？）

利用方法

HEAD部分にスタイルとスクリプトを記述します。 BODY部分には、任意の場所にDIV要素に対してID属性iL1とスクロールする画像を指定します。

改造方法

スクロールするテキストの速さ、方向とスタイルを変更可能です。

スタイル(Style1)

CSSリファレンスに従って、変更可。

スクロールスピード

actT：移動時間：速＝小
actV：移動速度：１以上
actD：初期移動角度：９０度以下
ee：跳ね返り係数：１以下

移動時間は小さいほど速く、移動速度は大きいほど速く移動します。初期移動角度は高いほど広角に跳ね上がり、小さいほど狭角になり鋭く跳ねます。また、跳ね返り係数を小さくすることで前回の跳ね上がり量に対して跳ね上がらなくなります。

テキストで実現したい場合は、左右スクロールを参考にして下さい。

対応ブラウザ

IE4,NN4以上（IE5ではposWidth,posHeightが正しく取得できないため処理に異常があります）

サンプル

［サンプルを見る］［ダウンロード］

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>

<HEAD>

<META HTTP-EQUIV="Content-Type" CONTENT="text/html;charset=Shift_JIS">
<META HTTP-EQUIV="Content-Style-Type" CONTENT="text/css">
<META HTTP-EQUIV="Content-Script-Type" CONTENT="text/javascript">
<TITLE>跳ねる物体</TITLE>

<STYLE TYPE="text/css">
<!--
.Style1{
	position:		absolute;
	width:			40px;
	height:			40px;
}
-->
</STYLE>

<SCRIPT LANGUAGE="javascript" TYPE="text/javascript">
<!--
//ブラウザのバージョンチェック
var brw_v = navigator.appVersion.charAt(0);
var brw_n = navigator.appName.charAt(0);
var iIE4 = false;
var iNN4 = false;
if((brw_v >= 4)&&(brw_n == "M"))iIE4 = true;
if((brw_v >= 4)&&(brw_n == "N"))iNN4 = true;

var actT = 30;	//移動時間：速＝小
var actV = 55;	//移動速度：１以上
var actD = 80;	//初期移動角度：９０度以下
var ee = 0.95;	//跳ね返り係数：１以下

var vlcX,vlcY;
var leftX,topY;
var lay,scrX,scrY;
var end_flag1 = false;
var end_flag2 = false;
vlcX = Math.round(actV*Math.cos(actD*(Math.PI)/180.));
vlcY = -Math.round(actV*Math.sin(actD*(Math.PI)/180.));

function Init(){
	if(iIE4){
		scrX = document.body.clientWidth;
		scrY = document.body.clientHeight;
		lay = document.all("iL1");
		topY = scrY - lay.style.posHeight;
	}
	if(iNN4){
		scrX = innerWidth;
		scrY = innerHeight;
		lay = document.layers["iL1"];
		topY = scrY - lay.clip.height;
	}
	leftX = 1;
	Bounding();
}

function Bounding(){
	var TimeID;
	var w,h;

	TimeID = setTimeout("Bounding()",actT);

	if(iIE4){
		lay.style.posLeft = leftX;
		lay.style.posTop = topY;
		w = lay.style.posWidth;
		h = lay.style.posHeight;
	}
	if(iNN4){
		lay.left = leftX;
		lay.top = topY;
		w = lay.clip.width;
		h = lay.clip.height;
	}
	leftX = leftX + vlcX;
	vlcY = vlcY + 5;
	topY = topY + vlcY;
	if((leftX >= scrX - w)||(leftX <= 1)){
		vlcX = -vlcX;
		leftX = leftX + vlcX;
		if(end_flag2){
			clearTimeout(TimeID);
			if(iIE4){
				lay.style.visibility="hidden";
			}
			if(iNN4){
				lay.visibility="hide";
			}
		}
	}
	if(topY >= scrY - h){
		if(end_flag1){
			end_flag2 = true;
		}else{
			end_flag1 = true;
		}
		vlcY = -vlcY * ee;
		topY = topY + vlcY;
		if(topY > scrY - h){
			topY = scrY - h;
		}
		topY = scrY - h;
	}else{
		end_flag1 = false;
	}
}
// -->
</SCRIPT>

</HEAD>

<BODY onload="Init()">

<DIV>
イメージが飛び跳ねます。<BR>
理系の私はこの幾何学的動作に美しさを感じる・・・（汗;）<BR>
本当に、物理的な放物線を描く動きです。<BR>
初速Ｖで角度Ｔの方向に発射され、跳ね返り係数ｅで徐々に跳ね返らなくなります。<BR>
跳ね方も自由に設定できます。<BR>
</DIV>

<DIV ID="iL1" CLASS="Style1">
<IMG SRC="./image/earth.gif" BORDER=0>
</DIV>

</BODY>
</HTML>

[Go To Top]