- 締切済み
複数のボールの落下、バウンドのさせかた
お分かりの方、どうかお知恵をお貸しください。 画像（文字）がページのオンロードで落下してくるものですが、 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）
- 専門家の回答
みんなの回答
<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>
<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>
関連するQ&A
- １０個の落ちてくる文字の位置を常に真中に表示
お知恵をおかりしたいのですが、 下記のソースで１０個の文字（GIF）がオンロードで落ちてくる という仕様なのですが、現在はポジションを指定してあるのですが、 これをスクリプトの追加で常に真中に揃えることがしたいのですが、 自分でもやってみましたがうまくいかずおわかりになる方お力をお貸しください。 <html> <head> <title></title> <script type="text/javascript"> window.onload = init; var n=8; var frac = [1.7,1.8,1.6,1.8,1.7,1.5,1.7,1.9]; var bound = [0.5,0.6,0.5,0.6,0.6,0.5,0.6,0.5]; var count = []; var elm=[]; var y = []; var handle=[]; function falling() { for(i=0;i<n;i++){ y[i] += ++count[i] * 0.001 * 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> <center> <img src=".jpg" width="330" height="440"> <img src=".gif" id="sample0" style="position:absolute;left:250px;"> <img src=".gif" id="sample1" style="position:absolute;left:300px;"> <img src=".gif" id="sample2" style="position:absolute;left:350px;"> <img src=".gif" id="sample3" style="position:absolute;left:400px;"> <img src=".gif" id="sample4" style="position:absolute;left:450px;"> <img src=".gif" id="sample5" style="position:absolute;left:500px;"> <img src=".gif" id="sample6" style="position:absolute;left:550px;"> <a href="#" alt="ENTER"><img src="enter.gif" id="sample7" border="0" style="position:absolute;left:680px;"></a> </center> </body> </html> というソースなのですが、たぶん１行か２行のコードの追加でモニタサイズなど関係なしに常にど真ん中にならべることができると思うのですが、難しく。。。。。 どうかなのとぞよろしくお願いいたします。
- 締切済み
- JavaScript
- スクロールの時間調節
初めて投稿します。 よろしくお願いします。 下記のような ソースで テキストのスクロールをしようと思いますが スクロールの早さの調節をしたい場合どうしたらよいのでしょう？ プログラムには詳しくないので すぐに使える状態で教えていただけませんか？ <SCRIPT language=JavaScript> <!-- var count,max,timer function init(){ count=0 max=(document.all?document.body.scrollHeight:document.height?document.height:1000) autoScroll() } function autoScroll() { if(navigator.appVersion.charAt(0)>=3) { if(count<max) { window.scroll(0,count++); timer=setTimeout("autoScroll()",4); } } } //--> </SCRIPT> <BODY onload=init()>
- 締切済み
- JavaScript
- 【js】onsubmit属性が変更できない
以下のようなhtmlを作ったのですが、onsubmit属性が変更されません。 どうすれば変更可能でしょうか。 <html> <body> <form id="test" action="test.cgi" onsubmit="test.cgi"> </form> <script> var elm = document.getElementById("test"); elm.action = "#"; elm.onsubmit = "#"; </script> </body> </html>
- ベストアンサー
- JavaScript
- 大きさを固定して、さらにぶるぶる・・・・
こんにちは、質問させてください。 JavaScriptでウィンドウの大きさをリサイズできないように固定し、 さらに、そのウィンドウを、ぶるぶる・・・と震えさせたいのですが、 その組み合わせ方がわかりません。 <html> <head> <title>無題ドキュメント</title> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <script type="text/javascript"> <!-- var shake_len = 30, shake_max = 5, shake_count = 0; function shake () { var x = 0, y = 0, n = shake_count % 4; if(n == 0) x = -shake_len; else if(n == 1) y = -shake_len; else if(n == 2) x = shake_len; else y = shake_len; window.moveBy(x, y); shake_count++; if (shake_count < shake_max * 4) setTimeout("shake();", 50); } //--> </Script> </head> <body onload="shake()" bgcolor="#FFFFFF" text="#000000"> </body> </html> と <scriptlanguage="JavaScript"> function changrsize(){ window.resizeTo(300,250); } window.onload=changesize; window.onresize=changesize; </Script> を組み合わせた感じのものを考えているのですが・・・・・。 教えてください！
- ベストアンサー
- JavaScript
- スクロール位置を中央にしたい
こんにちは。質問させてください。 クリックした位置に画面がスクロールするものを作っています。 今の状態だとクリックした位置にスクロールするのですが ストップする位置が画面の左上で止まります。 これを画面の中央で止まるようにしたいのです。 ヒントをいただけませんでしょうか。宜しくお願い致します。 // 現在のスクロール量を取得 function getScroll(){ var x, y; if(document.all !== void 0){ // IE4, IE5, IE6 x = document.body.scrollLeft; y = document.body.scrollTop; }else if(document.layers !== void 0 || (navigator.userAgent.indexOf("Opera") != -1 || window.opera !== void 0)){ // NN4, Opera6 x = window.pageXOffset; y = window.pageYOffset; }else if(navigator.userAgent.indexOf("Gecko") != -1){ // NS6, Mozilla x = window.scrollX; y = window.scrollY; }else{ x = y = 0; } return {x: x, y: y}; } // スクロール始めのスクロール量 var SCROLL ; var divCountScroller = 50 ; // 分割数 // 現在のスクロール位置から、指定座標までスクロールします function scroller( x, y, count ){ if( count === void 0 ){ count = 0 ; SCROLL = getScroll(); } if( count++ < divCountScroller ){ var c = count/divCountScroller ; var nx = SCROLL.x+( x-SCROLL.x )*( c+1/Math.PI*Math.sin( Math.PI*c ) ); var ny = SCROLL.y+( y-SCROLL.y )*( c+1/Math.PI*Math.sin( Math.PI*c ) ); window.scrollTo( nx, ny ); setTimeout( "scroller("+x+","+y+","+count+");", 30 ); } }
- 締切済み
- JavaScript
- javascriptで画像サイズをウィンドウのサイズに合わせて表示する方法
javascriptを最近はじめてみました。 しかしどうも慣れないためか、最後の一歩で思うように動いてくれません。 基本的にやりたい事はウインドウサイズに合わせて画像サイズを変更できるようにしたいと思ってます。 何とかいろいろ調べて、下記のスクリプトまで来たんですが （確かこのサイトの他の方への回答からほぼ活用） これでは画面が表示されるときにスクリプトが適用されません。 その後ウィンドウのサイズ変更をすると適用してくれるのですが。 なにやらとても簡単な事で上手く動いてくれないのかもしれませんが、 どうしてもできそうにありません。 どなたかお分かりの方がいましたらご教授願えると大変助かります。 よろしくお願いします。 以下、javascript↓ <body style="overflow:hidden" bgcolor="#ffffff" leftmargin="0" marginheight="0" marginwidth="0" topmargin="0"> <img src="test.JPG" id="backgroundID" style="position:absolute;top:0px;left:0px;z-index:0;" onload="setSize()"> <div style=" color: black; font-size: medium; font-family: serif; visibility: visible; display: block; position: absolute; z-index: 1; top: -1px; left: 0"> <script type="text/javascript"> var imgObj = document.getElementById('backgroundID'); var imgSize = {w:0, h:0} window.onresize = setImg; window.onscroll = function() { var t, l; if (document.documentElement.scrollTop) { t = document.documentElement.scrollTop; l = document.documentElement.scrollLeft; } else if (document.body.scrollTop) { t = document.body.scrollTop; l = document.body.scrollLeft; } else { return; } imgObj.style.top = t + 'px'; imgObj.style.left = l + 'px'; } function setSize() { imgSize.w = imgObj.width; imgSize.h = imgObj.height; } function setImg() { var wh, pW, pH, c; wh = getWindowSize(); pW = wh.w / imgSize.w; pH = wh.h / imgSize.h; if (pW > 0 || pH > 0) { c = (pW > pH) ? pW : pH; imgObj.style.width = parseInt(imgSize.w * c + 1) + 'px'; imgObj.style.height = parseInt(imgSize.h * c + 1) + 'px'; } else { imgObj.style.width = imgSize.w + 'px'; imgObj.style.height = imgSize.h + 'px'; } } function getWindowSize() { var wh = {w:0, h:0}; if (document.body.clientWidth) { wh.w = document.body.clientWidth wh.h = document.body.clientHeight; } else if(document.documentElement.clientWidth) { wh.w = document.documentElement.clientWidth; wh.h = document.documentElement.clientHeight; } else if(window.innerWidth) { wh.w = window.innerWidth; wh.h = window.innerHeight; } return wh; } </script> </body>
- 締切済み
- JavaScript
- select要素のvalueを配列で取得したいです
select要素のvalueを配列で取得したく、下記のサンプルを動かそうと試みました。 <html> <head></head> <body> <form> <!-- ここに<select name="c1">～<select name="c20">の20個のselectがあるとする --> </form> <input type="button" value="はい" onclick="test(this.form)"> <script type="text/javascript"> function test ( form ) { var values = new Array(); for ( var i=0; i < 20; i ++ ) { var elm = form.elements['c'+i]; values[i] = elm.options[elm.selectedIndex].value; } } </script> </body> </html> このようなサンプルを動かそうとしたのですが、 var elm = form.elements['c'+i];のところの['c'+i]が正しくないようで 「elm is underfind」というエラーが出てしまいます <script> function myForm (form) { var values = new Array(); for ( var i=0; i<20; i++ ) { var elm = form.elements[i]; values[i] = elm.options[elm.selectedIndex].value; document.write(values[i] + "<br />"); } } </script> インデックス名を'c'+iからiにすると取得できるのですが、 ブラウザが読み込みをやめない状態になってしまいます。 select要素のnameはc1から始まりc20と何も換えていません。 何が間違っているのでしょうか。
- ベストアンサー
- JavaScript
- 複数のtextareaの保存について
下記のコードのようにtextareaが二つあったとします id="a"は保存できましたがid="b"はどうやって保存するのでしょうか？("a", "b")としても無理でした どのようにすれば複数保存できるのでしょうか？ ご回答お願いします <html> <head> </head> <body> <textarea id="a"></textarea> <textarea id="b"></textarea> <script> var a = document.getElementById("a"); window.onload = function() { var body = localStorage.getItem("a"); if (body != null){ a.value = body; } }; a.onchange = function() { localStorage.setItem("a",a.value); }; </script> </body> </html>
- ベストアンサー
- JavaScript
- <body>にwindow.onload = functionを２つ設定すると、最後に書いたイベントだけが実行されてしまいます。
<body>タグにonloadイベントを実行させる2つの外部jsを<head>内に設置し実行すると、 最後に記述したイベントだけが反映されてしまいます。 http://blog.webcreativepark.net/2008/02/26-185844.html を参考にいろいろといじってはみたのですが、 function addEvent(elm,listener,fn){ try{ elm.addEventListener(listener,fn,false); }catch(e){ elm.attachEvent("on"+listener,fn); } } js初心者でして、上の関数の中にどのように記述をすれば良いのかわかりません。 IE6・IE7・safariで動作させるには、実際にどのようなソースを書けばいいのでしょうか。 どなたかご教授いただけますでしょうか。 <head>内の外部jsは、以下のように記述しました。 <script src="/A.js" type="text/javascript"></script> <script src="/B.js" type="text/javascript"></script> </head> 外部jsのソースは以下になります。 //A.js window.onload = function() { var blur = function () { this.blur() }; for (var i = 0; i < document.links.length; i++) document.links[i].onfocus = blur; } //B.js window.onload = function() { prepZooms(); insertZoomHTML(); zoomdiv = document.getElementById(zoomID); zoomimg = document.getElementById(theID); } 以上になります。宜しくお願い致します。
- ベストアンサー
- JavaScript
- jqueryのscrollfollowが動かない
jqueryのscrollfollowが他のスクリプトと衝突しているようで動きません。解決方法はありますか？ スライドショー用のスクリプトを記述すると、動かなくなります。 スライドショー用の記述を削除すると、scrollfollowはちゃんと機能してくれます。 おそらく、このスライドショーのスクリプトと衝突して動かなくなってるのだと 思いますが、解決方法はあるのでしょうか？ どたなか、よろしければお助けください。 以下が、現在のソースです。 （「※」マークのところがそのスクリプトの記述部分です） ----------------------------------------------------------- <!-- JS -->（※ここからがscrollfollowのスクリプトです。） <script type="text/javascript" src="jquery-1.5.1.min.js"></script> <script type="text/javascript" src="jquery.ui.core.js"></script> <script type="text/javascript" src="jquery.easing.1.3.js"></script> <script type="text/javascript" src="jquery.cookie.js"></script> <script type="text/javascript" src="jquery.scrollfollow.js"></script> <script type="text/javascript"> $( document ).ready( function (){ $('#sidebar1').scrollFollow({ speed: 500, killSwitch: 'sidebar12' }); }); </script> （※ここまでがscrollfollowのスクリプトです。） <script type="text/javascript" src="smoothscroll.js"></script> <script type="text/javascript" language="JavaScript"> <!-- function backToTop() { var x1 = x2 = x3 = 0; var y1 = y2 = y3 = 0; if (document.documentElement) { x1 = document.documentElement.scrollLeft || 0; y1 = document.documentElement.scrollTop || 0; } if (document.body) { x2 = document.body.scrollLeft || 0; y2 = document.body.scrollTop || 0; } x3 = window.scrollX || 0; y3 = window.scrollY || 0; var x = Math.max(x1, Math.max(x2, x3)); var y = Math.max(y1, Math.max(y2, y3)); window.scrollTo(Math.floor(x / 2), Math.floor(y / 2)); if (x > 0 || y > 0) { window.setTimeout("backToTop()", 25); } } //--> </script> （※画面一番上メインにスライドショーを設置していて、ここからがそのスクリプトです。 下記のスクリプトを削除するとscrollfollowは正常に機能してくれます。記述すると動きません。） <!--スライド--> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> <script type="text/javascript" src="jquery.panelgallery-2.0.0.js"></script> <script type="text/javascript"> $(function(){ $('.slideshow').panelGallery(); }); </script> （※画面一番上メインにスライドショーを設置していて、ここまでがそのスクリプトです。） ------------------------------------------ 以上です。 よろしくお願いいたします！
- ベストアンサー
- JavaScript
