Stars Follow Mouse

[Total: 0    Average: 0/5]

This shows how to have stars follow the cursor.

Head Code:

<STYLE TYPE="text/css">
.star { position : absolute; visibility : hidden; }
#s1 { font-size : 10px; color : blue; }
#s2 { font-size : 12px; color : red; }
#s3 { font-size : 20px; color : gold; }
#s4 { font-size : 18px; color : green; }
#s5 { font-size : 16px; color : orange; }
#s6 { font-size : 14px; color : hotpink; }
#s7 { font-size : 12px; color : white; }
#s8 { font-size : 10px; color : grey; }
#s9 { font-size :  8px; color : steelblue; }
body {background-color: black ; color : white ; }
</STYLE>
<script>
/* CONFIGURE THESE */
var MAX_NUM  =  9; /* min starts with 1 and max is this number */
                   /* If you change MAX_NUM you MUST ensure the timerX varaible is defined for all values 1 to MAX_NUM */
				   /* ALSO a DIV with the correct ID must be created!! */
var speed    = 50; /* milliseconds delay between updates */
var x_offset =  5; /* x offset from mouse position */
var y_offset = 15; /* y offset from mouse position */
/* END CONFIGURE ITEMS */

var isIE=document.all?true:false; 
var isNS4=document.layers?true:false; 
var isNS6=navigator.userAgent.indexOf("Gecko")!=-1?true:false;

function initThis()
{
if(isNS4)
  document.captureEvents(Event.MOUSEMOVE); 
if(isNS6)
  document.addEventListener("mousemove", get_mouse, true);
if(isNS4||isIE)
  document.onmousemove=get_mouse; 
}
function cleanUp()
{
  clearAllTimers();
}
timer1=null;
timer2=null;
timer3=null;
timer4=null;
timer5=null;
timer6=null;
timer7=null;
timer8=null;
timer9=null;
var MIN_NUM=1; /* don't change this */
var x = 0;
var y = 0;

function get_mouse(e) 
{ 
  x=(isNS4||isNS6)?e.pageX:event.clientX+document.body.scrollLeft; 
  y=(isNS4||isNS6)?e.pageY:event.clientY+document.body.scrollLeft; 
  x+=x_offset;
  y+=y_offset;
  glowIt(MIN_NUM);
} 
function clearAllTimers()
{
  for (var i=MIN_NUM;i<=MAX_NUM;i++)
    clearTimer(i);
}

function clearTimer(x)
{
  if(eval("timer"+x)!=null)
  {
    clearInterval(eval("timer"+x));
    eval("timer"+x+"=null");
  }
}
function setTimer(x,n)
{
  eval("timer"+n+"=setTimeout('"+x+"("+n+")',speed)");
}

function glowIt(n)
{
  if(n<MAX_NUM)
  {
    if(isNS4)
    { 
      eval("document.s"+n+".top="+y);
      eval("document.s"+n+".left="+x);
      eval("document.s"+n+".visibility='visible'");
    }
	else if(isNS6)
	{
	  document.getElementById("s"+n).style.top=y;
	  document.getElementById("s"+n).style.left=x;
	  document.getElementById("s"+n).style.visibility='visible';
	}
    else if(isIE)
    {
      eval("s"+n+".style.top="+y);
      eval("s"+n+".style.left="+x);
      eval("s"+n+".style.visibility='visible'");
    }
	clearTimer(n);
    n++;
	setTimer("glowIt",n);
  }
  else
  {
     fadeIt(MAX_NUM);
  }   
} 

function fadeIt(n)
{
  if(n>MIN_NUM) 
  {
    if(isNS4)
	  eval("document.s"+n+".visibility='hidden'");
	else if(isNS6)
	  document.getElementById("s"+n).style.visibility='visible';
    else if(isIE)
	  eval("s"+n+".style.visibility='hidden'"); 
    n--;
	clearTimer(n);
	setTimer("fadeIt",n);
  }
  else 
  {
     clearAllTimers();
  }
} 
</script>

Init Code:

initThis();

Body Code:

<BODY onload="initThis()" onblur="cleanUp()">
<DIV ID="s1" CLASS="star">*</DIV>
<DIV ID="s2" CLASS="star">*</DIV>
<DIV ID="s3" CLASS="star">*</DIV>
<DIV ID="s4" CLASS="star">*</DIV>
<DIV ID="s5" CLASS="star">*</DIV>
<DIV ID="s6" CLASS="star">*</DIV>
<DIV ID="s7" CLASS="star">*</DIV>
<DIV ID="s8" CLASS="star">*</DIV>
<DIV ID="s9" CLASS="star">*</DIV>

Your stuff goes here...<BR>
<a href="javascript:initThis()">click to init if it doesnot on its own</a>

Times Viewed: 13

Leave a Reply

Your email address will not be published. Required fields are marked *