|
HTMLタグ > マウスカーソルのまわりを画像が回転
|
マウスカーソルのまわりをいくつかの画像がくるくる回転します。
1) </title>〜</head>に以下のタグを入れます。
設定は画像のファイル名と数だけでいいと思うけど、それ以外も設定する場合は説明にそって変えて下さい。
<!-- ======================================================================
マウス追っかけ回転星 Ver.0.04 (C)2001 まさ http://www.paso.f2s.com/
======================================================================= -->
<style type="text/css">
<!--
.posabs { position:absolute;left:-200;top:0; }
//-->
</style>
<script language=javascript>
<!--
//---------------------------------------------------
// 設定可能なパラメタ(ここから)
//---------------------------------------------------
var IMGNAME = "【画像ファイル名】" // 画像ファイル名
var MAXSTAR = 【画像の数】; // 星の数です。
var RNDPITCH = 6 ; // 回転ピッチ(角度)。大きくすると回転が速くなります。
var RSPAN = 30; // 回転の半径。大きくすると円が大きくなります。
var OFFSETX = -8; // 回転の中心点の位置補正(右方向へのピクセル数)
var OFFSETY = -2; // 回転の中心点の位置補正(下方向へのピクセル数)
var TLATE = 50; // タイマー設定値(msec) 分からなければこのままで。
//---------------------------------------------------
// 設定可能なパラメタ(ここまで)
//---------------------------------------------------
function eventPos(e)
{
if (document.all ) {
mouseX = event.clientX + document.body.scrollLeft + OFFSETX;
mouseY = event.clientY + document.body.scrollTop + OFFSETY;
} else if (document.layers || document.getElementById) {
mouseX = e.pageX + OFFSETX;
mouseY = e.pageY + OFFSETY;
}
}
function roundStars()
{
newMouseX = mouseX;
newMouseY = mouseY;
for (starNum = 0; starNum < MAXSTAR; starNum++) {
newStartAngle = startAngle + divideAngle * starNum;
if (newStartAngle > 360) { newStartAngle -= 360; }
newPosX = newMouseX + Math.round(RSPAN * Math.cos(newStartAngle * Math.PI / 180));
newPosY = newMouseY + Math.round(RSPAN * Math.sin(newStartAngle * Math.PI / 180));
setImgPos("MOV"+starNum, newPosX, newPosY);
}
startAngle += RNDPITCH;
setTimeout("roundStars()", TLATE);
}
function setImgPos(id, xpos, ypos)
{
if (document.layers) {
document.layers[id].left = xpos;
document.layers[id].top = ypos;
} else if (document.all) {
document.all[id].style.left = xpos;
document.all[id].style.top = ypos;
} else if (document.getElementById) {
document.getElementById(id).style.left = xpos;
document.getElementById(id).style.top = ypos;
}
}
var mouseX = -200;
var mouseY = 0;
var startAngle = 0;
var divideAngle = Math.round(360 / MAXSTAR);
if (document.layers || document.getElementById || document.all) {
for (nstar = 0; nstar < MAXSTAR; nstar++) {
document.write('<div id="MOV'+nstar+'" class="posabs">');
document.write('<img src="'+IMGNAME+'"></img></div>');
}
if (document.layers || document.getElementById && !document.all) {
window.document.captureEvents(Event.ONLOAD|Event.MOUSEMOVE);
}
document.onmousemove = eventPos;
setTimeout("roundStars()", TLATE);
}
//-->
</script>
<!-- =================== End of マウス追っかけ回転星 ================== -->
|
「HTMLタグ」のトップに戻る
|
|
|
