複雑過ぎて頭がこんがらがっています
これは画像を衛星のように動かすプログラムです。
まずソースコードを貼り付けます。
<html>
<head>
<title>Satellite pictures</title>
<script language="JavaScript"><!--
iList = ["img0","img1","img2","img3","img4","img5"];
cx = 100; // 回転の中心Ｘ座標
cy = 100; // 回転の中心Ｙ座標
cnt = 0;
rx = 100; // 回転半径（横）
ry = 50; // 回転半径（縦）
function rotZIMG(){
for (i=0; i<iList.length; i++){
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="setInterval('rotZIMG()',100)">
<div style="color:#ff00ff;font-size:18pt">Satellite pictures</div>
<br>
<br>
<img src="image/circle.gif" style="position:absolute;top:60px;left:80px;z-index:100;">
<img src="image/0.jpg" name="img0" style="position:absolute;">
<img src="image/1.jpg" name="img1" style="position:absolute;">
<img src="image/2.jpg" name="img2" style="position:absolute;">
<img src="image/3.jpg" name="img3" style="position:absolute;">
<img src="image/4.jpg" name="img4" style="position:absolute;">
<img src="image/5.jpg" name="img5" style="position:absolute;">
</body>
</html>
まず画像が奥に行くに従って小さくなるので画像が３Dに見えるように錯覚を起こしてしまいいる。まずは画像の動きですよね。
３Dの回転というのを見るのが初めてなので凄く難しい。
横と縦に回転して、実際に画像がどう動いているのかがよく分かりません。
ただ、画像が小さくなるのはどこでやっているか分かりました。
document.images[iList[i]].style.width = z / 1.5;
document.images[iList[i]].style.height = z / 2;
ここですよね。でも奥に行くに従って徐々に小さくなるのには別のソースコードが必要ですよね。
それはどこに書いてあるのでしょうか。
問題は次の式です。
z = 100 - Math.cos(n) * 50;
100は横の回転半径で50は縦の回転半径の数値なんですかね。
因みに、知識不足なんですけどz-indexって何を意味してるんですかね。
辞書調べても載ってなかったので分かる方教えて下さい。
初歩的な知識も含めて、このソースコードを分かりやすく解説してくれる方、お待ちしております。
どうぞ宜しくお願い致します。
