The cool Rainbow Circle of JS Effects

This code is not my written hope users do not take to do business use thank you!

<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<style>
body {background:black; margin:0; overflow:hidden;}
h1 {position:absolute; top:4px; left:10px; margin:0; width:430px;}
H1 a {width:256px; height:37px; float:left; Background:url (logo.gif) no-repeat;}
H1 strong {float:left; font-size:14px; color: #FFCC66; padding-top:12px; font-weight:normal; font-family:arial;}
#fps {color: #94d37e; margin-left:10px;}
#bg {width:100%; height:100%; background:white; Filter:alpha (opacity:50); opacity:0.5; position:absolute; left:0; top : 0;}
#loading {position:absolute; top:50%; color:white; z-index:2; text-align:center; width:100%;}
img {position:absolute;}
#ctrl_pad {background:black URL (body_bg.gif) repeat-x 0 48px; height:85px; color: #fff;}
#auto_play {width:107px; height:31px; Background:url (btn.gif) no-repeat; border:none; color: #e1e1e1; font-size:12px; Position:absolute; top:8px; left:450px; }
h2 {text-align:center; color: #524e69; width:100%; position:absolute; bottom:10px; left:0; font-size:16px; Font-weight: Normal font-family:arial; }
H2 a {color: #524e69; text-decoration:none;}
H2 a:hover {border-bottom:1px dotted #00CCCC; color: #0cc;}
#info {color: #827ed3; font-size:14px; font-family:arial; font-weight:bold; position:absolute; top:15px; left:570px;}
. btn, #show_pad {position:absolute; top:16px; right:20px; color: #9a9a9a; text-decoration:none; font-size:12px;}
. Btn:hover, #show_pad: hover {text-decoration:none; color: #ccc;}
EM {color: #ccc; font-size:12px; font-weight:normal; font-style:normal;}
</style>
<meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 "/>
<title> Rainbow Circle Effects </title>
<script type= "Text/javascript" >
function Getnow ()
{
Return (new Date ()). GetTime ();
}

function rnd (min, max)
{
Return parseint ((Math.random () *999999)% (max-min+1)) +min;
}

Window.onload=function ()
{
Control
var Octrl=document.getelementbyid (' Ctrl_pad ');
var Oautoplay=document.getelementbyid (' Auto_play ');
var iautoplaytimer=0;
var bmanual=true;

var speed_cng_rate=4;
var speed_max=20;
var auto_samp_rate=1;

Oautoplay.onclick=function ()
{
if (this.value== ' auto move ')
{
var x=rnd (0, Document.documentElement.clientWidth);
var y=rnd (0, document.documentElement.clientHeight);
var xspeed=rnd (-speed_max,speed_max);
var yspeed=rnd (-speed_max,speed_max);

Iautoplaytimer=setinterval (function () {
if (! ( Samp++%auto_samp_rate))
{
OnMove (x, y);
}
X+=xspeed;
Y+=yspeed;

if (X&LT;=SIZE/2) xspeed=rnd (0,speed_max);
if (X&GT;=DOCUMENT.DOCUMENTELEMENT.CLIENTWIDTH-SIZE/2) xspeed=-rnd (0,speed_max);

if (Y&LT;=SIZE/2) yspeed=rnd (0,speed_max);
if (Y&GT;=DOCUMENT.DOCUMENTELEMENT.CLIENTHEIGHT-SIZE/2) yspeed=-rnd (0,speed_max);

if (Xspeed<-speed_max)
{
Xspeed+=rnd (0,speed_cng_rate);
}
else if (Xspeed>speed_max)
{
Xspeed+=rnd (-speed_cng_rate,0);
}
Else
{
Xspeed+=rnd (-speed_cng_rate,speed_cng_rate);
}

if (Yspeed<-speed_max)
{
Yspeed+=rnd (0,speed_cng_rate);
}
else if (Yspeed>speed_max)
{
Yspeed+=rnd (-speed_cng_rate,0);
}
Else
{
Yspeed+=rnd (-speed_cng_rate,speed_cng_rate);
}
}, 30);

Stop ();

This.value= ' manual movement ';
Bmanual=false;
}
Else
{
Restart ();
Clearinterval (Iautoplaytimer);
This.value= ' automatic movement ';
Bmanual=true;
}
};


var aele=document.body.getelementsbytagname (' * ');
for (i=0;i<aele.length;i++)
{
Aele[i].onmousedown=function (EV)
{
(ev| | event). Cancelbubble=true;
};
}

var Bcanuse=false;

Core
var ofps=document.getelementbyid (' fps ');
var asharps=[];
var aimgs=[];
var asrc=[' qun_1.png ', ' qun_3.png ', ' qun_5.png ', ' qun_4.png ', ' qun_2.png '];
var count=0;
var samp=0;
var continue_count=0;
var i=0;

var lastitype=-1;

var samp_rate=3;
var speed_rate=20;
var fps_rate=20;
var size=100;
var continue_len=5;

if (/safari/i.test (navigator.useragent))
{
speed_rate=45;
}
else if (/firefox/i.test (navigator.useragent))
{
speed_rate=30;
}

/*for (i=1;i<=5;i++)
{
Asrc.push (' Qun_ ' +i+ '. png ');
}*/

for (i=0;i<asrc.length;i++)
{
Aimgs[i]=new Image ();
Aimgs[i].onload=function ()
{
count++;

if (count==asrc.length)
{
document.getElementById (' BG '). style.display= ' None ';
document.getElementById (' loading '). style.display= ' None ';
Start ();
}
};
Aimgs[i].onerror=function ()
{
document.getElementById (' loading '). Innerhtml= ' <span style= "color:red; Font-weight:bold; " > Material loading failed, please refresh and retry </span> ';
};
Aimgs[i].src=asrc[i];
}

function OnMove (x, y)
{
if (Continue_count++%continue_len)
{
var Itype=lastitype;
}
Else
{
/*do
{
var itype=rnd (0, aimgs.length-1);
}while (Lastitype==itype); * *
Itype= (lastitype+1)%asrc.length;

Lastitype=itype;
}

Createimg (IType, x, y, 1000);
}

function createimg (index, L, T)
{
var oimg=document.createelement (' img ');
OIMG.SRC=AIMGS[INDEX].SRC;

oimg.style.left=l+ ' px ';
oimg.style.top=t+ ' px ';
Oimg.height=aimgs[index].height;
Oimg.width=aimgs[index].width;
oimg.style.marginleft=-oimg.width/2+ ' px ';
oimg.style.margintop=-oimg.height/2+ ' px ';

Document.body.appendChild (OIMG);

Asharps.push ({obj:oimg, Endtime:getnow (), Speedx:aimgs[index].width/speed_rate, Speedy:aimgs[index].height/speed_ Rate});
}

function Stop ()
{
Document.onmousedown=null;
}

function restart ()
{
Document.onmousedown=fnhandlermousemove;
}

SetTimeout (function () {
if (!bcanuse)
{
Oautoplay.onclick ();
}
}, 3000);

function Fnhandlermousemove ()
{
Bcanuse=true;
Document.onmousemove=function (EV)
{
var oevent=ev| | Event

if (! ( Samp++%samp_rate))
{
OnMove (Oevent.clientx, Oevent.clienty);
}
return false;
};

Document.onmouseup=function ()
{
Document.onmousemove=null;
Document.onmouseup=null;
};
return false;
};

function Start ()
{
Document.onmousedown=fnhandlermousemove;

var lasttime=0;
var ishowfps=0;
var lastmove=0;

SetInterval (function () {
var inow=getnow ();

var anewsharps=[];

if (inow-lastmove>30)
{
for (i=0;i<asharps.length;i++)
{
Asharps[i].obj.width=math.max (Asharps[i].obj.offsetwidth-asharps[i].speedx, 0);
Asharps[i].obj.height=math.max (asharps[i].obj.offsetheight-asharps[i].speedy, 0);

if (bmanual)
Asharps[i].obj.style.top=parseint (asharps[i].obj.style.top) -5+ ' px ';

asharps[i].obj.style.marginleft=-asharps[i].obj.offsetwidth/2+ ' px ';
asharps[i].obj.style.margintop=-asharps[i].obj.offsetheight/2+ ' px ';

if (asharps[i].obj.width==0 | | asharps[i].obj.height==0)
{
Document.body.removeChild (Asharps[i].obj);
}
Else
{
Anewsharps.push (Asharps[i]);
}
}

Asharps=anewsharps;
Lastmove=inow;
}

if (! ( Ishowfps++%fps_rate))
{
Ofps.innerhtml=parseint (1000/(inow-lasttime));
}
Lasttime=inow;
}, 1);
}

if (/msie/i.test (navigator.useragent))
{
Alert (' You are currently using IE browser, this browser performance is low, can not render the effect of this program, recommended to replace Firefox or Safari ');
}
};
Document.oncontextmenu=function ()
{
return false;
};
</script>

<body>
<div id= "Ctrl_pad" >

<a class= "btn" href= "javascript:;" onclick= "document.getElementById (' Ctrl_pad '). style.display= ' None '; document.getElementById (' Show_pad '). style.display= ' block '; >↑↑ Shrinkage </a>
<div id= "Info" >
<em> can drag and drop the mouse on the screen, or click "Auto Move" </em>-Fps:<span id= "FPS" ></span>
</div>
<input id= "Auto_play" type= "button" value= "Auto Move"/>

</div>
<a style= "Display:none;" id= "Show_pad" href= "javascript:;" onclick= "document.getElementById (' Ctrl_pad '). style.display= ' block ';d ocument.getelementbyid (' Show_pad '). style.display= ' None '; " >↓↓ re-display </a>
<div id= "BG" >
</div>
<div id= "Loading" >
Loading ...
</div>
</body>

This code realizes that when the mouse is pressed and dragged, the mouse will drag a rainbow circle or let the mouse move and drag out a rainbow circle is a very cool JS effect

The cool Rainbow Circle of JS Effects