複数のボールの落下、バウンドのさせかた -お分かりの方、どうかお知恵をお貸-

１０個の落ちてくる文字の位置を常に真中に表示

お知恵をおかりしたいのですが、下記のソースで１０個の文字（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> というソースなのですが、たぶん１行か２行のコードの追加でモニタサイズなど関係なしに常にど真ん中にならべることができると思うのですが、難しく。。。。。どうかなのとぞよろしくお願いいたします。

スクロールの時間調節

初めて投稿します。　よろしくお願いします。下記のような　ソースで　テキストのスクロールをしようと思いますがスクロールの早さの調節をしたい場合どうしたらよいのでしょう？プログラムには詳しくないので　すぐに使える状態で教えていただけませんか？ <SCRIPT language=JavaScript>  </SCRIPT> <BODY onload=init()>

【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でウィンドウの大きさをリサイズできないように固定し、さらに、そのウィンドウを、ぶるぶる・・・と震えさせたいのですが、その組み合わせ方がわかりません。 <html> <head> <title>無題ドキュメント</title> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <script type="text/javascript">  </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> を組み合わせた感じのものを考えているのですが・・・・・。教えてください！

スクロール位置を中央にしたい

こんにちは。質問させてください。クリックした位置に画面がスクロールするものを作っています。今の状態だとクリックした位置にスクロールするのですがストップする位置が画面の左上で止まります。これを画面の中央で止まるようにしたいのです。ヒントをいただけませんでしょうか。宜しくお願い致します。 // 現在のスクロール量を取得 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↓ <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>

select要素のvalueを配列で取得したいです

select要素のvalueを配列で取得したく、下記のサンプルを動かそうと試みました。 <html> <head></head> <body> <form>  </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と何も換えていません。何が間違っているのでしょうか。

複数の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>

<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); } 以上になります。宜しくお願い致します。

ハイライト表示をしたい

2度目の投稿（前回の投稿 http://oshiete1.goo.ne.jp/qa5506744.html）になりますが、指定の文言を色を変えて目立つように（以下ハイライト表示）させたいと思っています最初に作った物はタグの中（altの中）まで置換をしてしまい、HTMLがくずれるという始末・・・そこでこのサイトで質問した所、以下のスクリプトを教えて頂きましたところがfirefoxだと動くのですが、IE（IE６しか入っていない環境で使いたい）では動きません色々調べたところ「フレーム越しの要素コピーは，FFではできて，IEではできないらしい」というのが原因じゃないかという所まで辿り着きましたまだjavascript初心者で勉強中な為、教えて頂いたスクリプトも全部理解している訳ではありませんが、どなたか解決方法を教えて頂けないでしょうか何卒宜しくお願い致します以下教えて頂いたスクリプト  </script>

jqueryのscrollfollowが動かない

jqueryのscrollfollowが他のスクリプトと衝突しているようで動きません。解決方法はありますか？スライドショー用のスクリプトを記述すると、動かなくなります。スライドショー用の記述を削除すると、scrollfollowはちゃんと機能してくれます。おそらく、このスライドショーのスクリプトと衝突して動かなくなってるのだと思いますが、解決方法はあるのでしょうか？どたなか、よろしければお助けください。以下が、現在のソースです。（「※」マークのところがそのスクリプトの記述部分です） ----------------------------------------------------------- （※ここからが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">  </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> （※画面一番上メインにスライドショーを設置していて、ここまでがそのスクリプトです。） ------------------------------------------ 以上です。よろしくお願いいたします！

黒背景で、白文字（リンク挿入）をフェードインするHTMLソースを教えて

黒背景で、白文字（リンク挿入）をフェードインするHTMLソースを教えてください。 <head>の間に、 <script language="JavaScript">  </script> </head> <body bgcolor="#000000" text="#ffffff"> 以上のタグを入れ、 <body bgcolor="#000000" text="#ffffff"> タグを<body>の代わりに置くと、リンク挿入されていない文字はフェードインされるのですが、リンク挿入文字は対応されません。ソースをどのようにすれば、リンク挿入文字もフェードイン対応されるでしょうか。

Firefox/2　カーソルが砂時計のまま　while(line=str.shift()){

<html> <head> <script type="text/javascript"> function init(){ var str="a:b:c".split(/:/); var line; while(line=str.shift()){ document.write(line + "<BR>"); } } </script> </head> <body onload="init()"> </body> </html> 上記をFirefox/2（Win XP）で実行すると、カーソルが砂時計のまま戻りません。（IE6では再現視せず）回避策ありましたら教えてください。

1ページ内で複数のwindow.onload = functionの動作

Ajaxを使用して取得してきたRSSをinnerHTMLで表示するスクリプトを1ページ内に複数設置したいのですが、うまくいきません。 prototype.jsを使うと複数のonloadを制御できるという記事を参考にしたのですが、動作しませんでした。（WindowsIE6で検証してます） http://hori-uchi.com/archives/2005_09.html BODY以下のソースはこちらです。現状だとどちらか一つだけなら動作する感じです。これをどちらも動作する方法をご教授いただけませんでしょうか。宜しくお願いします。 //RSS取得1箇所目 <div id="p1">roading1</div><script> window.onload = function(){ var u = document.getElementsByTagName("head")[0].appendChild(document.createElement("script")); u.type = "text/javascript"; u.charset = "utf-8"; u.src = "http://###"; } var xml = {}; xml.onload = function(data){ var items1 = data.items; var g = "\n"; for(var i = 0; i < Math.min(items1.length, 20); i++){ // } document.getElementById("p1").innerHTML = g; } </script> //RSS取得2箇所目 <div id="p2">roading2</div><script> window.onload = function(){ var u = document.getElementsByTagName("head")[0].appendChild(document.createElement("script")); u.type = "text/javascript"; u.charset = "utf-8"; u.src = "http://***"; } var xml = {}; xml.onload = function(data){ var items2 = data.Result; var h = "\n"; for(var i = 0; i < Math.min(items2.length, 20); i++){ // } document.getElementById("p2").innerHTML = h; } </script>

JavascriptのtimerIDの意味

いつもお世話になっております。現在、Javascriptの勉強をしており、その過程でカウントダウンタイマーを作成しています。テキスト通りにsetTimeout（）メソッドなどを使用しているのですが、timerIDの意味が理解できず困っております。タイマーを識別するID番号ということはなんとなく理解できるのですが、下記コードのelse if (timerID)やtimerID=0とは何を意味しているのでしょうか。 if文の条件がtimerIDとはどういうことなのか。 timerIDの値を0にする必要性は何なのか。教えてください。 <doctype! html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>Javascript</title> <script type="text/javascript"> window.onload = init; function init(){ document.form1.start.onclick = start; document.form1.reset.onclick = stop; } var timerID; function start(){ count = parseInt(document.form1.time.value); if (count<=0){ count = 0; return; } else if (timerID){ count--; } document.form1.time.value=count; if (count==0){ clearTimeout(timerID); timerID = 0; alert("時間です"); return; } timerID = setTimeout("start()", 1000); } function stop(){ document.form1.time.value=0; if(timerID){ clearTimeout(timerID); timerID=0; } } </script> </head> <body> <h1>カウントダウンタイマー</h1> <form name="form1"> 時間<input name="time" type="text" size="3">秒<br> <input name="start" type="button" value="スタート"> <input name="reset" type="button" value="リセット"> </form> <script type="text/javascript"> </script> </body> </html>

一文字ずつ表示したときのパフォーマンス

var obj = document.body , text = "01234566789" count = 0 ; InsertTimer = setInterval( Insert , 200 ) ; function Insert (){ if(InsertTimer&&count===11) { clearInterval(InsertTimer); InsertTimer=0; return; } obj.innerHTML= text.substring(0,++count); } 現在このような感じで一文字ずつ表示するスクリプトを書いています。ですがブラウザによって表示にかかる時間が変わってしまいます。ブラウザの描画性能も影響しているのかもしれませんが、もう少し軽く動かすことはできないでしょうか？

FireFoxでブラウザーと閉じる時に特定の処理を実行したいのですが良い方法を教えてください。

ブラウザーを閉じる時に特定の処理をWebページ内で実行したのですが、FireFoxでは可能でしょうか? IEでは、下記のロジックで対応することが出来ました。 window.onunload=function() { var x=window.event.clientX,y=window.event.clientY; var w=document.body.clientHeight; if (y<0 &(w-5)<x || x<15) { alert('IEを閉じます。'); } }

ページ更新後も保持される変数の利用について

初めての質問です。よろしかったらお答えください。複数のインラインフレーム用ページが用意してあり、テキストボックスに入力した番号によって任意のページから10個のインラインフレームを順番に配置するようにしたいのです。ここを参考に作ったのですがうまくいきません。 http://okwave.jp/qa4019868.html <html> <head> <script language="javascript">  </script> </head> <body> <form action="index.htm" method="get"> <input name="number" type="text" value=""> <input type="submit"> </form> <script language="javascript">  </script> </body> </html> 根本的な所から間違っているのでしょうか？

クリックでお気に入りに入れるプログラム

<head> <script language="JavaScript">  </script> </head> <a href="#" OnClick="bookmark();return false;"> お気に入りに入れる </a> ここまでできたのですが、どのHTMLページをお気に入りにいれるかという設定はどうしたらいいのでしょうか？フレームを使用しておりますので、フレームに上のタグをいれて、ブックマークを入れるとそのフレームだけのお気に入りになってしまいます。それと var burl = window.document.location var btitle = window.document.title の部分は一体何を意味するのでしょうか？

CSS3回転済み要素上のevent.x,yについて

■概要 IEのDXフィルターがIE10で廃止されたのをきっかけに、CSS3に手を出し始めました。回転にはスタイルシートの属性値としてtransfar:rotate([number]deg)を用いますが、この回転を行った要素についておかしな点があったので質問させていただきます。回転処理を行った要素上でマウスイベント（mousedown,move,up他）の座標メンバ（x,y）を取得すると、意味のわからない座標になっています。規則性を見つけようとしましたが、効率の良い方法が見つからず悩んでいます。やりたかったことは、回転済み要素をマウスでＤ＆Ｄすることですが、マウスダウンの瞬間、座標がすっとんで、要素がワープします。この現象の原因、仕組み、解決策等、ご回答よろしくお願い致します。m(_ _)m ■以下備考、随時補足させていただきます。・動作環境はIE10inWIN7、他は試していない。・rotate無しだと期待通りの動作。・ありだとたとえrotate(0deg)でもこの現象が起きる。 ■以下ソースコード：ローテートの行を消したりつけたりしてみてください。 <div id=asdf> aaa </div> <script> function SQUARE(){ this.posX = 0; this.posY = 100; } var elm; var square = new SQUARE(); function MainLoop(){ elm.style.left = square.posX; elm.style.top = square.posY; InputQWER(elm.style.left + ", " + elm.style.top); } function InputQWER(str){ var elm = document.getElementById("qwer"); elm.value = str; } function InputZXCV(str){ var elm = document.getElementById("zxcv"); elm.value = str; } function main(){ elm = document.getElementById("asdf"); elm.style.width = 100; elm.style.height = 100; elm.style.background = "yellow"; elm.style.position = "absolute"; //■■■■■■■■■■■■■■■■■■■■■■　ローテートの行 elm.style.msTransform = "rotate(30deg)"; elm.attachEvent("onmousemove", function(evt){ square.posX = evt.x; square.posY = evt.y; InputZXCV(evt.x + ", " + evt.y); }); timer = setInterval("MainLoop()", 100); } setTimeout("main()", 10); </script> <input id=qwer> <input id=zxcv>

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

みんなの回答

関連するQ&A

１０個の落ちてくる文字の位置を常に真中に表示

スクロールの時間調節

【js】onsubmit属性が変更できない

大きさを固定して、さらにぶるぶる・・・・

スクロール位置を中央にしたい

javascriptで画像サイズをウィンドウのサイズに合わせて表示する方法

select要素のvalueを配列で取得したいです

複数のtextareaの保存について

<body>にwindow.onload = functionを２つ設定すると、最後に書いたイベントだけが実行されてしまいます。

ハイライト表示をしたい

jqueryのscrollfollowが動かない

黒背景で、白文字（リンク挿入）をフェードインするHTMLソースを教えて

Firefox/2　カーソルが砂時計のまま　while(line=str.shift()){

1ページ内で複数のwindow.onload = functionの動作

JavascriptのtimerIDの意味

一文字ずつ表示したときのパフォーマンス

FireFoxでブラウザーと閉じる時に特定の処理を実行したいのですが良い方法を教えてください。

ページ更新後も保持される変数の利用について

クリックでお気に入りに入れるプログラム

CSS3回転済み要素上のevent.x,yについて

注目のQ&A

カテゴリ

あなたにピッタリな商品が見つかる！ OKWAVE セレクト

専門家に質問してみよう

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

みんなの回答

関連するQ&A

１０個の落ちてくる文字の位置を常に真中に表示

スクロールの時間調節

【js】onsubmit属性が変更できない

大きさを固定して、さらにぶるぶる・・・・

スクロール位置を中央にしたい

javascriptで画像サイズをウィンドウのサイズに合わせて表示する方法

select要素のvalueを配列で取得したいです

複数のtextareaの保存について

<body>にwindow.onload = functionを２つ設定すると、最後に書いたイベントだけが実行されてしまいます。

ハイライト表示をしたい

jqueryのscrollfollowが動かない

黒背景で、白文字（リンク挿入）をフェードインするHTMLソースを教えて

Firefox/2 カーソルが砂時計のまま while(line=str.shift()){

1ページ内で複数のwindow.onload = functionの動作

JavascriptのtimerIDの意味

一文字ずつ表示したときのパフォーマンス

FireFoxでブラウザーと閉じる時に特定の処理を実行したいのですが良い方法を教えてください。

ページ更新後も保持される変数の利用について

クリックでお気に入りに入れるプログラム

CSS3回転済み要素上のevent.x,yについて

注目のQ&A

カテゴリ

あなたにピッタリな商品が見つかる！ OKWAVE セレクト

専門家に質問してみよう

Firefox/2　カーソルが砂時計のまま　while(line=str.shift()){