| ポイント |
<![CDATA[
sita += 10;
sita %= 360;
COS = Math.cos(sita * pi);
SIN = Math.sin(sita * pi);
imgX = (COS + SIN)*r + centerX;
imgY = (SIN - COS)*r + centerY;
document.myIMG.style.left= imgX;
document.myIMG.style.top = imgY;
]]>
|
| 説 明 |
画像を円にそって移動させるには以下の計算式で表示するXY座標を求め画像のスタイルシートプロパティに設定します。
<![CDATA[
X = (cosθ + sinθ) * 半径 + 回転中心X座標
Y = (sinθ - cosθ) * 半径 + 回転中心Y座標
]]> |
| サンプル |
<![CDATA[
<html>
<head>
<title>画像を円にそって移動させる</title>
<script language="JavaScript"><!--
function moveImg()
{
sita += 10;
sita %= 360;
COS = Math.cos(sita * pi);
SIN = Math.sin(sita * pi);
imgX = (COS + SIN)*r + centerX;
imgY = (SIN - COS)*r + centerY;
document.myIMG.style.left= imgX;
document.myIMG.style.top = imgY;
}
function set()
{
centerX = 100;
centerY = 100;
r = 50;
pi = Math.PI / 180;
imgX = imgY = 0;
sita = 0;
timerID = setInterval("moveImg()",100);
}
// --></script>
</head>
<body onLoad="set()">
<img src="image.jpg" name="myIMG" style="position:absolute;top:0px;">
<div style="positon:absolute;top:0px;left:0px;background-color:yellow;width:200px;height:200px"> </div>
</body>
</html>
]]>
|
| 補足説明 |
なし |
|
■サンプルスクリプトを実行する >>実行
■各ブラウザでの動作結果を見る >>View!
|
画像を円にそって移動させる