| BACK |
JavaScript

マウス追っかけ回転星

マウスポインタの周りを複数の星がクルクル回ります。

ご利用の前に「利用規定」を必ず読んでおいてください。
スクリプトを利用した場合、無条件に同意したものとみなします。


更新履歴
2001.09.09
Ver.0.04 -> Ver.0.05 記述の癖を直しました。
2001.08.08
Ver.0.03 -> Ver.0.04 Netscape6対応他
2001.02.07
Ver.0.02 -> Ver.0.03 分割型からBODY一本型に変更
2001.02.01
Ver.0.01 -> Ver.0.02 変数名の変更等
2001.01.28
Ver.0.01公開

動作確認済ブラウザ

Internet Explorer 5.01 (Windows)
Netscape Communicator 4.7 (Windows)
Netscape 6.01 (Windows)


設置方法
  1. </HEAD>の直前行付近に以下のソースをコピーします。
<!-- ========== for マウス追っかけ回転星 ========== -->
<style type="text/css">
<!--
.posabs { position:absolute;left:-200px;top:0px; }
-->
</style>
<!-- ============================================== -->
  1. </BODY>の直前行付近に以下のソースをコピーします。
  2. ソース内の赤字部分を好みで設定してください。
    画像ファイルは別途ご用意ください。
  3. 動作に関する設定(青字部分)は、ソース内のコメントを参考にお好みで変更してください。
<!-- ======================================================================
                      マウス追っかけ回転星 Ver.0.05
                  http://homepage3.nifty.com/masas/sdir/
                Copyright(c)2001 Masa, All Rights Reserved.
======================================================================= -->
<script type="text/javascript" language="JavaScript">
<!--
//---------------------------------------------------
//     設定可能なパラメタ(ここから)
//---------------------------------------------------
var IMGNAME  = "star.gif"   // 画像ファイル名
var MAXSTAR  = 5; // 星の数です。
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+"px";
    document.all[id].style.top = ypos+"px";
  } else if (document.getElementById) {
    document.getElementById(id).style.left = xpos+"px";
    document.getElementById(id).style.top = ypos+"px";
  }
}
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+'"><\/div>');
  }
  if (document.layers || document.getElementById && !document.all) {
    window.document.captureEvents(Event.MOUSEMOVE);
  }
  document.onmousemove = eventPos;
  setTimeout("roundStars()", TLATE);
}
// -->
</script>
<!-- =================== End of マウス追っかけ回転星 ================== -->



Copyright © 2001-2002 Masa, All Rights Reserved.