Javascirpt to create "interactive pointer" effects

Effects | pointers

A very good effect, with the keyboard arrow keys to control a beautiful arrow! Maybe it'll inspire you and make a fun little game.

<title>interactive arrow</title>

<STYLE>
V\:* {behavior:url (#default #vml)}
</STYLE>

<script language= "JavaScript" >

/*
All Files are designed & writen by Windy_sk, your can use it freely but ...
You are must KEEP this ITEM!
Email: seasonx@163.net
*/

var timer = null;
var time_unit = 30;
var a_speed = 10;
var l_speed = 15;
var move_x, move_y;

function Arrowstyle (type,color,color2,focus) {
if (color = = "") color = "white";
if (Color2 = = "") Color2 = "white";
This.type = type;
This.color = color;
This.color2 = Color2;
This.focus = focus;
}

var style_list = new Array ();
Style_list[style_list.length] = new Arrowstyle ("gradient", "Blue", "", "");
Style_list[style_list.length] = new Arrowstyle ("gradient", "", "Blue", "");
Style_list[style_list.length] = new Arrowstyle ("gradient", "Blue", "Red", "");
Style_list[style_list.length] = new Arrowstyle ("gradient", "Red", "Blue", "");
Style_list[style_list.length] = new Arrowstyle ("gradient", "Blue", "Red", "50%");
Style_list[style_list.length] = new Arrowstyle ("gradient", "Red", "Blue", "-50%");
Style_list[style_list.length] = new Arrowstyle ("Gradientradial", "", "Blue", "");
Style_list[style_list.length] = new Arrowstyle ("Gradientradial", "Blue", "", "");
Style_list[style_list.length] = new Arrowstyle ("Gradientradial", "Red", "Blue", "");
Style_list[style_list.length] = new Arrowstyle ("Gradientradial", "Blue", "Red", "");
Style_list[style_list.length] = new Arrowstyle ("Gradientradial", "Red", "Blue", "50%");
Style_list[style_list.length] = new Arrowstyle ("Gradientradial", "Blue", "Red", "-50%");

function Changestyle () {
if (Style_list.length = = 0) return;
var The_style = Style_list[getrandomnum (1,style_list.length)-1];
Fill.type = The_style.type;
Fill.color = The_style.color;
Fill.color2 = The_style.color2;
Fill.focus = The_style.focus;
}

/*
function Changestyle () {
Fill.type = Getrandomnum (0,1)? " Gradient ":" Gradientradial ";
Fill.color = Getrandomdcolor ();
Fill.color2 = Getrandomdcolor ();
Fill.focus = Getrandomnum (0,1)? " + ":"-"+ getrandomnum (0,100). toString () +"% ";
}

function Getrandomdcolor () {
var result = "";
var hex = new Array (6);
Hex[0] = "FF";
HEX[1] = "CC";
HEX[2] = "99";
HEX[3] = "66";
HEX[4] = "33";
HEX[5] = "00";
for (Var i=0;i<3;i++) {
result = = Hex[getrandomnum (0,5)];
}
return result;
}
*/

function Getrandomnum (Min,max) {
var Range = max-min;
var Rand = Math.random ();
Return (Min + math.round (Rand * Range));
}

Function Moveit () {
 var the_top  = parseint (angle.style.top);
 var the_left  = parseint (angle.style.left);
 angle.style.top  = the_top + move_y;
 angle.style.left = The_left + move_x;
 if (The_top < 0 | | | the_top > Document.body.offsetHeight) {
  angle. Rotation = 180-angle. rotation;
  move_y  =-move_y;
  angle.style.top = the_top<0 0:document.body.offsetheight + move_y;
 }
 if (The_left < 0 | | | the_left > Document.body.offsetWidth) {
  angle. rotation  = 360-angle. rotation;
  move_x   =-move_x;
  angle.style.left = the_left<0 0:document.body.offsetwidth + move_x;
 }
}

Document.onkeydown = function () {
Angle. rotation = angle. Rotation% 360;
if (timer!=null) return;
var the_angle = Math.PI * angle. rotation/180;
Switch (event.keycode) {
Case://left
Timer = setinterval ("angle.") Rotation-= A_speed ", time_unit);
Break
Case://right
Timer = setinterval ("angle.") Rotation + = A_speed ", time_unit);
Break
Case://down
The_angle + = Math.PI;
Case://up
move_y =-math.floor (L_speed * Math.Cos (the_angle));
move_x = +math.floor (L_speed * Math.sin (the_angle));
Timer = setinterval ("Moveit ()", time_unit);
Break
}
Return
}

Document.onkeyup = function () {
if (timer!=null) clearinterval (timer);
timer = null;
}

Document.onclick = function () {
Changestyle ();
}

Document.onmousewheel = function () {
if (Event.wheeldelta >= 120) {
Angle.style.width = Math.ceil (parseint (angle.style.width) * 1.1);
Angle.style.height = Math.ceil (parseint (angle.style.height) * 1.1);
}else if (Event.wheeldelta <=-120) {
Angle.style.width = Math.ceil (parseint (angle.style.width) * 0.9);
Angle.style.height = Math.ceil (parseint (angle.style.height) * 0.9);
}
Return
}

Window.onload = function () {
SetInterval ("window.status= ' rotation: ' +angle.")  Rotation+ ';  Top: ' +angle.style.top+ '; Left: ' +angle.style.left ', time_unit);
}

</SCRIPT>

<body scroll= "No" >

<v:group id= "angle" style= ' position:absolute;top:0;left:0;width:20;height:20;z-index:999 ' coordorigin= ' -10,-10 "Coordsize=" 20,20 ">
<v:shape coordorig= " -10,-10" coordsize= "20,20" style= "width:20;height:20" title= "Interactive" Arrow "fillcolor=" Red "filled=" true "strokecolor=" Black "strokeweight=" 1pt ">
<v:stroke strokecolor= "Black" strokeweight= "1pt"/>
<v:fill id=fill type= ' gradient ' color= ' blue '/>
<v:path v= "M 0,-10 l-10,10 l 0,5 l 10,10 x E"/>
</v:shape>
</v:group>

</body>

<style>a:hover{color: #036;} </style><script language= "javascript" >var rate = 20;var Obj;var act = 0;var elmh = 0;var ElmS = 128;var ELMV = 255;var Clrorg;var timerid;if (navigator.appName.indexOf ("Microsoft", 0)!=-1 && parseint ( navigator.appversion) >= 4) {Browser = true;} else {Browser = false;} if (Browser) {document.onmouseover = Dorainbowanchor;document.onmouseout = Stoprainbowanchor;} function Dorainbow () {if (Browser && Act!= 1) {act = 1;obj = event.srcelement;clrorg = Obj.style.color; Timerid = SetInterval ("ChangeColor ()", 100);}} function Stoprainbow () {if (Browser && Act!= 0) {Obj.style.color = Clrorg;clearinterval (timerid); act = 0;}} function Dorainbowanchor () {if (Browser && Act!= 1) {obj = Event.srcelement;while (obj.tagname!= ' A ' && o Bj.tagname!= ' body ') {obj = obj.parentelement;if (obj.tagname = = ' A ' | | | obj.tagname = ' body ') break;} if (Obj.tagname = = ' A ' && obj.href!= ') {act = 1;clrorg = Obj.style.color; TImerid = SetInterval ("ChangeColor ()", 100);}}} function Stoprainbowanchor () {if (Browser && Act!= 0) {if (Obj.tagname = = ' A ') {Obj.style.color = Clrorg;clearinte Rval (timerid); act = 0;}} function ChangeColor () {obj.style.color = Makecolor ();} function Makecolor () {if (ElmS = 0) {elmr = ELMV; elmg = elmv; elmb = ELMV;} else {T1 = Elmv;t2 = (255-elms) * elmv/255;t3 = elmh% 60;t3 = (t1-t2) * T3/60;IF (ELMH <) {ELMR = T1; elmb = T2; ELMG = t2 + t3;} else if (Elmh <) {ELMG = t1; elmb = t2; elmr = t1-t3;} else if (ELMH < 180) {ELMG = t1; elmr = t2; elmb = t2 + t3;} else if (Elmh <) {ELMB = t1; elmr = t2; elmg = t1-t3;} else if (Elmh <) {ELMB = t1; elmg = t2; elmr = t2 + t3;} else if (ELMH < 360) {ELMR = t1; elmg = t2; elmb = t1-t3;} else {elmr = 0; elmg = 0; elmb = 0;}} ELMR = Math.floor (ELMR); ELMG = Math.floor (ELMG); ELMB = Math.floor (ELMB); clrrgb = ' # ' + elmr.tostring (+) + elmg.tostring (1 6) + elmb.tostring (+); elmh = elmh + rate;if (ELMH >= 360) ELMH = 0;return Clrrgb;} </script><div><a href= "# #" > Mouse move here to watch the effect </a></div>

[Ctrl + A ALL SELECT hint: You can modify some of the code, and then run]