締切済み

複数のボールの落下、バウンドのさせかた

2008/08/29 08:04

お分かりの方、どうかお知恵をお貸しください。画像（文字）がページのオンロードで落下してくるものですが、 http://flabo.net/labo/bound/index.html <html> <head> <title></title> <script type="text/javascript"> window.onload = init; var frac = 2; var bound = 0.5; var count = 0; var elm; var y = 0; function falling() { y += ++count * 0.098 * frac; elm.style.top = y; if(y >= wH){ y = wH; count = Math.ceil(-count * bound); if( count == -1 )clearInterval( handle ); } } function init() { elm = document.getElementById("sample"); wH = document.all ? document.body.clientHeight : window.innerHeight; wH = wH - elm.height; handle = setInterval(falling,10); } </script> </head> <body> <img src="f.gif" id="sample" style="position:absolute"> </body> </html> のページにあるようなもので、この物体、や文字をここでは１つですが、１０個の文字を横に並べて、落ちる速度や、バウンドの速さなどこのソースに手を加えてできますでしょうか？（このソースに手を加えてできなければ、何かほかに良いスクリプトはありますでしょうか）自分でも試してもみたのですが、２つとしても上手く作動しなく、とても頭を抱えてしまっています。お分かりになる方がおりましたら、どうかお知恵をお貸しください。宜しくお願いいたします。

gyrate
お礼率45% (10/22)

JavaScript
回答数2
ありがとう数0

みんなの回答 （2）
専門家の回答

みんなの回答

noname#84373

2008/08/29 11:58 回答No.2

<html> <body> <script type="text/javascript"> for(i=0;i<5;i++) document.write('<img src="f.gif" id="sample'+i+'" style="position:absolute;left:'+i*50+'px;">'); window.onload = function(){ wH = (document.all ? document.body.clientHeight : window.innerHeight) - document.getElementById("sample0").height; for(i=0;i<5;i++) { setTimeout('falling('+i+')',10); y[i]=count[i]=0;} } var count = []; var y = []; var wH; function falling(i) { y[i] += ++count[i] * 0.098 * [.4,1.8,1.6,1.5,2.2][i]; if(y[i] >= wH){ y[i] = wH; count[i] = ~~(-count[i] * [0.8,.99,0.4,0.2,0.9][i]); var f=(count[i]==-1)*1; } document.getElementById("sample"+i).style.top = y[i]; if(!f) setTimeout('falling('+i+')',10); } </script> </body> </html>

ログインすると、全ての回答が全文表示されます。

noname#84373

2008/08/29 08:44 回答No.1

<html> <head> <title></title> <script type="text/javascript"> window.onload = init; var n=5; var frac = [2,1.8,1.6,1.5,2.2]; var bound = [0.8,0.6,0.4,0.2,0.9]; var count = []; var elm=[]; var y = []; var handle=[]; function falling() { for(i=0;i<n;i++){ y[i] += ++count[i] * 0.098 * frac[i]; elm[i].style.top = y[i]; if(y[i] >= wH){ y[i] = wH; count[i] = Math.ceil(-count[i] * bound[i]); if( count[i] == -1 ) clearInterval( handle[i] ); } } } function init() { for(i=0;i<n;i++) { elm[i] = document.getElementById("sample"+i); handle[i] = setInterval(falling,10); y[i]=count[i]=0; } wH = document.all ? document.body.clientHeight : window.innerHeight; wH = wH - elm[0].height; } </script> </head> <body> <img src="f.gif" id="sample0" style="position:absolute;left:0px;"> <img src="f.gif" id="sample1" style="position:absolute;left:50px;"> <img src="f.gif" id="sample2" style="position:absolute;left:100px;"> <img src="f.gif" id="sample3" style="position:absolute;left:150px;"> <img src="f.gif" id="sample4" style="position:absolute;left:200px;"> </body> </html>

ログインすると、全ての回答が全文表示されます。