- ベストアンサー
JavaScriptのY軸回転について学習中にわからないこと
- cnt=0;の意味がわかりません。cntの初期値を変えても何も変化しない。
- "imgならば・・"の意味がわかりません。画像と関連しているのかどうか知りたい。
- <BODY onload="setInterval('rotZIMG()',100)">の意味がわかりません。回転の動作をボタンで制御する方法を教えてほしい。
- JavaScript
- 回答数2
- ありがとう数3
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
こんにちは 新たな疑問が出たようですね？ （１） 画像の初期配置(cnt=0のとき)は [img0] [img5] [img1] [img4] [img2] [img3] になります これをcntを増やしていくことによって画像を右に回転させてます (例)cnt=100のとき [img4] [img3] [img5] [img2] [img0] [img1] という感じになります （２） 一応iListの方になるのですが結論的に言えば画像のことです img0 → 0.gif img1 → 1.gif ん～～うまく言葉で説明し直せてるか分からないですけど・・・【】内が説明 for (i=0; i<iList.length; i++) 【iListの配列の数だけループを繰り返します】 { n = (i * (360 / iList.length) + cnt++) * Math.PI / 180; //(1)？ 【基準となる『n』の値を決めます】 y = cy - Math.cos(n) * ry;//(2)？ 【配列それぞれの高さの数値を決めます】 z = 100 - Math.cos(n) * 50; // (3)？ 【配列それぞれの奥行きを決めます】 document.images[iList[i]].style.pixelLeft = cx + Math.sin(n) * rx;//(4)？ 【それぞれの配列を画面左からどれ位の位置で表示するか】 document.images[iList[i]].style.pixelTop = y;//(5)？ 【それぞれの配列を画面上からどれ位の位置で表示するか】 document.images[iList[i]].style.zIndex = z;//(6)？ 【それぞれの配列の奥行き(重なり）の順番をどのように重ねていくか】 document.images[iList[i]].style.width = z / 1.5;//(7)？ 【それぞれの配列(画像)の幅はどれ位にするか】 document.images[iList[i]].style.height = z / 2;//(8)？ 【それぞれの配列(画像)の高さはどれ位にするか】 } } ようはまずiList[0](=img0)の配置を決め、画像の大きさを決めて もう一度上に戻ってiList[1](=img1)の配置、画像の大きさを決め、 また上に戻ってiList[2](=img2)の配置、画像の大きさを決めて・・ をiList[6](=img5)まで繰り返しているのです ・・・逆に分かりにくくなっちゃったかな～～(汗) （３） 画面の表示が終わったら0.1秒ごとにfunction rotZIMG()を作動させる ＞この回転の動作を止めて、（「右」、「左」）のボタンを押す事で、回転させるように こんな感じになります <SCRIPT language=JavaScript><!-- iList = ["img0","img1","img2","img3","img4","img5"]; cx = 150; // 回転の中心Ｘ座標 cy = 100; // 回転の中心Ｙ座標 cnt = 0; rx = 140; // 回転半径（横） ry = 70; // 回転半径（縦） function rotZIMG(obj) { for (i=0; i<iList.length; i++) { if(obj == "right") { n = (i * (360 / iList.length) + cnt++) * Math.PI / 180; } if(obj == "left") { n = (i * (360 / iList.length) + cnt--) * Math.PI / 180; } y = cy - Math.cos(n) * ry; z = 100 - Math.cos(n) * 50; document.images[iList[i]].style.pixelLeft = cx + Math.sin(n) * rx; document.images[iList[i]].style.pixelTop = y; document.images[iList[i]].style.zIndex = z; document.images[iList[i]].style.width = z / 1.5; document.images[iList[i]].style.height = z / 2; } } // --></SCRIPT> </HEAD> <BODY onload="tID=setInterval('rotZIMG(\'right\')',100)"> <IMG style="POSITION: absolute" src="sample0.gif" name=img0> <IMG style="POSITION: absolute" src="sample1.gif" name=img1> <IMG style="POSITION: absolute" src="sample2.gif" name=img2> <IMG style="POSITION: absolute" src="sample3.gif" name=img3> <IMG style="POSITION: absolute" src="sample4.gif" name=img4> <IMG style="POSITION: absolute" src="sample5.gif" name=img5> <input type="button" value="逆転" onClick="clearInterval(tID);tID=setInterval('rotZIMG(\'left\')',100)"> <input type="button" value="停止" onClick="clearInterval(tID)"> <input type="button" value="正転" onClick="clearInterval(tID);tID=setInterval('rotZIMG(\'right\')',100)">
その他の回答 (1)
- leap_day
- ベストアンサー率60% (338/561)
こんにちは 昨日送る前にFirefoxでの不具合があったのですが、修正中に寝てしまってそのまま忘れて回答を送ってしまいました（－－；） 締め切られてたらどうしようかと思ってましたが間に合ったようで良かったです（＾＾） Firefoxでは・・・ <img src="" style="position:absolute;top:100px;left:100px;width:50px;heihgt:50px;"> のように『**px』という風にしていないときちんと表示してくれないようです（style属性が無視されてしまったため左上に画像が重なって表示されただけになっていました） 修正ソースはこちらになります <script language=JavaScript><!-- iList = ["img0","img1","img2","img3","img4","img5"]; cx = 150; // 回転の中心Ｘ座標 cy = 100; // 回転の中心Ｙ座標 cnt = 0; rx = 140; // 回転半径（横） ry = 70; // 回転半径（縦） function rotZIMG(obj) { for (i=0; i<iList.length; i++) { if(obj == "right") { n = (i * (360 / iList.length) + cnt++) * Math.PI / 180; } if(obj == "left") { n = (i * (360 / iList.length) + cnt--) * Math.PI / 180; } y = cy - Math.cos(n) * ry; z = 100 - Math.cos(n) * 50; lpos = cx + Math.sin(n) * rx; iwidth = z / 1.5; iheight=z / 2; document.getElementById(""+iList[i]+"").style.left = lpos +"px"; document.getElementById(""+iList[i]+"").style.top = y +"px"; document.getElementById(""+iList[i]+"").style.zIndex = z; document.getElementById(""+iList[i]+"").style.width = iwidth+"px"; document.getElementById(""+iList[i]+"").style.height = iheight+"px"; } } // --></script> </head> <body onload="tID=setInterval('rotZIMG(\'right\')',100)" hight=100%> <div style="height:250px;position:relative;"> ↑これは↓でposition:absolute;しているので作画スペースを設けるものです <img style="position: absolute" src="sample0.gif" id="img0" > <img style="position: absolute" src="sample1.gif" id="img1"> <img style="position: absolute" src="sample2.gif" id="img2"> <img style="position: absolute" src="sample3.gif" id="img3"> <img style="position: absolute" src="sample4.gif" id="img4"> <img style="position: absolute" src="sample5.gif" id="img5"> </div> <input type="button" value="逆転" onClick="clearInterval(tID);tID=setInterval('rotZIMG(\'left\')',100)"> <input type="button" value="停止" onClick="clearInterval(tID)"> <input type="button" value="正転" onClick="clearInterval(tID);tID=setInterval('rotZIMG(\'right\')',100)">
お礼
詳しい説明ありがとうございました。
お礼
詳しい説明ありがとうございました。
補足
初心者の私でもなんとなく理解できました。 ボタンのソースありがとうございました。 cx =150; // cy = 100;で、位置を決めるようですが、これを、例えば、<center> のよな感じで、中央ぞれえに したいときは、どのようにすればよいですか？ 色々試しましたが、（中央には揃いますが）、回転しなくなったりと・・・ その試した内容は、 外部ファイルの方に<center>でくくったり、ＨＴＭＬの方をくくったり、一応、cx,cyで、中央ぞろえにしましたが、これだと、見るスペックによって、位置が変わってしまうので・・