便利eelife Java Script

   戻る

画像が円を描いて回ります。



サンプルソース
<!--HTMLタグ </HEAD>の下に挿入してください。-->
<BODY onload="moveImg()">
<FORM><INPUT type="button" onclick="spin()" name="botan" value="逆廻り"></FORM>
<IMG src="../java/img/a0042.gif" name="myIMG" style="position:absolute;top : 200px;left : 200px;">
</BODY>
<!--Javascript <HEAD>と</HEAD>の間に挿入してください。 -->
<SCRIPT language="JavaScript">
<!--eelife

circle_X = 450;
circle_Y = 200;
r = 150;
Radian = Math.PI/180; //角度のラジアン値(0.017453293) PI 円周率3.141592654
img_Left = 0;
img_Top = 0;
angle = 270;
flag = true;

function moveImg(){
angle ++;
Pos_cos = Math.cos(angle * Radian); //余弦値
Pos_sin = Math.sin(angle * Radian); //正弦値
if(flag) {
img_Left = Math.round(Pos_cos * r) + circle_X; //
img_Top = Math.round(Pos_sin * r) + circle_Y; //
}
else{
img_Top = Math.round(Pos_cos * r) + circle_Y; // 左廻り
img_Left = Math.round(Pos_sin * r) + circle_X; //
}
document.myIMG.style.left= img_Left;
document.myIMG.style.top = img_Top;
angle %= 360; // 1 から 360 を繰り返します。
tmrID = setTimeout("moveImg()",20);
}

function spin()
{
window.clearTimeout(tmrID); // tmrID を止めます。
tmrID = null;
flag = !flag; 
moveImg()
}

// -->
</SCRIPT>
コメント
角度 sin cos
0 0 1
30 0.5 0.866025404
60 0.866025404 0.5
90 1 0
120 0.866025404 -0.5
150 0.5 -0.866025404
180 0 -1
210 -0.5 -0.866025404
240 -0.866025404 -0.5
270 -1 0
300 -0.866025404 0.5
330 -0.5 0.866025404
360 0 1