マウスの回りに画像を回転させる |
説 明 | 画像がマウスのまわりで回転します。 |
---|---|
注意事項 | 下記サンプルの赤字部分が回転する画像の半径、青文字が回転させる画像のファイル名になっています。それぞれの状況に応じて書き換えてください。 |
■動作雰囲気チェック >>実行 |
|
サンプル |
<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> |