マウスの回りに画像を回転させる

説  明
画像がマウスのまわりで回転します。

注意事項
下記サンプルの赤字部分が回転する画像の半径、青文字が回転させる画像のファイル名になっています。それぞれの状況に応じて書き換えてください。


動作雰囲気チェック >>実行
サンプル
<html>
<head>
<title>マウスの回りに画像を回転させる</title>
<script language="JavaScript"><!--
iList = ["img0","img1","img2","img3","img4","img5"];
mx = my = cnt = 0;
r = 40; // 半径
ofst = 4; // マウス画像の位置調整
function rotIMG()
{
for (i=0; i<iList.length; i++)
{
n = (i * (360 / iList.length) + cnt++) * Math.PI / 180;
document.images[iList[i]].style.pixelLeft = mx - ofst + Math.sin(n) * r;
document.images[iList[i]].style.pixelTop = my - ofst - Math.cos(n) * r;
}
}
// --></script>
</head>
<body onLoad="setInterval('rotIMG()',100)" onMousemove="mx=event.x-8;my=event.y">
<br>
<br>
<img src="star.gif" name="img0" style="position:absolute;left:-90px;top:0px;">
<img src="star.gif" name="img1" style="position:absolute;left:-90px;top:0px;">
<img src="star.gif" name="img2" style="position:absolute;left:-90px;top:0px;">
<img src="star.gif" name="img3" style="position:absolute;left:-90px;top:0px;">
<img src="star.gif" name="img4" style="position:absolute;left:-90px;top:0px;">
<img src="star.gif" name="img5" style="position:absolute;left:-90px;top:0px;">
</body>
</html>