变色的旋转圆圈JS特效代码

Dear 丶 2022-07-11 08:14 281阅读 0赞

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
<html xmlns="http://www.w3.org/1999/xhtml">  
<head>  
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
<title>变色的旋转圆圈</title>  
</head>  
<body>  
<script language="JavaScript">  
var CoLoUrS=new Array('ff0000','ffffff','0000ff','ffffff');  
var dots=16;  
var ThingsInArray;  
var step=0.3;  
var a\_StEp=0.05;  
var RunTime=0;  
var currStep = 0;  
var Xpos = 0;  
var Ypos = 0;  
var cntr=70;  
var count\_a=0;  
var move\_a=1;  
var curColour;  
var count=0;  
var move=1;  
var brwsr=(document.layers)?1:0;  
if (brwsr)\{  
for (i=0; i < dots; i++)\{  
document.write('<LAYER NAME="a'+i+'" LEFT=0 TOP=0 BGCOLOR=\#ffffff CLIP="0,0,2,2"></LAYER>');  
\}  
var x = document;  
ThingsInArray=new Array(x.a0,x.a1,x.a2,x.a3,x.a4,x.a5,x.a6,x.a7,x.a8,x.a9,x.a10,x.a11,x.a12,x.a13,x.a14,x.a15)  
\}  
else\{  
document.write('<div id="ieDiv" style="position:absolute;top:0px;left:0px"><div id="c" style="position:relative">');  
for (i=0; i < dots; i++)\{  
document.write('<div style="position:absolute;top:0px;left:0px;width:2px;height:2px;background:\#ffffff;font-size:2px"></div>');  
\}  
document.write('</div></div>');  
var x = ieDiv.all.c.all;  
ThingsInArray=new Array(x\[0\],x\[1\],x\[2\],x\[3\],x\[4\],x\[5\],x\[6\],x\[7\],x\[8\],x\[9\],x\[10\],x\[11\],x\[12\],x\[13\],x\[14\],x\[15\])  
\}  
  
  
function colourStep()\{  
count+=move;  
if (count >= ThingsInArray.length) \{count=0;count\_a+=move\}  
if (count\_a == CoLoUrS.length) count\_a=0;  
if (brwsr) ThingsInArray\[count\].bgColor=CoLoUrS\[count\_a\];  
else ThingsInArray\[count\].style.background=CoLoUrS\[count\_a\];  
setTimeout('colourStep()',100)  
\}  
function moveAbout()\{  
if (brwsr)\{  
Ypos = window.pageYOffset+window.innerHeight/2 + window.innerHeight/3.1 \* Math.cos((RunTime)/3)\*Math.cos(RunTime/50);  
Xpos = window.pageXOffset+window.innerWidth/2 + window.innerWidth/2.4 \* Math.sin((RunTime)/5)\*Math.cos(RunTime/30);  
\}  
else\{  
Ypos = document.body.scrollTop+document.body.offsetHeight/2 + document.body.offsetHeight/2.8\*Math.cos((RunTime)/3)\*Math.cos(RunTime/10);  
Xpos=  document.body.scrollLeft+document.body.offsetWidth/2 + document.body.offsetWidth/2.4\*Math.sin((RunTime)/5)\*Math.sin(RunTime/20);  
 \}  
RunTime+=a\_StEp;  
Tma=setTimeout("moveAbout()", 10);  
\}  
  
  
function TwistnSpin()\{  
if (brwsr)\{  
 for ( i = 0 ; i < 16 ; i++ )  
 \{  
  var templayer="a"+i  
  document.layers\[templayer\].top = Ypos+cntr\*Math.cos((currStep + i\*4)/10.2)\*Math.cos(currStep/10)  
  document.layers\[templayer\].left =Xpos+cntr\*Math.sin((currStep + i\*4)/10.2);  
 \}  
\}  
else\{  
 for (i=0;i<ieDiv.all.c.all.length;i++)  
 \{  
 ieDiv.all.c.all\[i\].style.top = Ypos+cntr\*Math.cos((currStep + i\*4)/10.2)\*Math.cos(currStep/10)  
 ieDiv.all.c.all\[i\].style.left= Xpos+cntr\*Math.sin((currStep + i\*4)/10.2);  
 \}  
\}  
currStep+=step;  
setTimeout("TwistnSpin()",10);  
\}  
function Shrink()\{  
cntr-=0.5;  
GoShrink=setTimeout('Shrink()',10);  
if (cntr <=20)  
\{clearTimeout(GoShrink);Swell()\}  
\}  
function Swell()\{  
cntr+=0.5;  
GoSwell=setTimeout('Swell()',10);  
if (cntr >=70)  
\{clearTimeout(GoSwell);Shrink()\}  
\}  
function StArTuP()\{  
moveAbout();  
TwistnSpin();  
Shrink();  
colourStep();  
\}  
StArTuP();  
</script>  
</body>  
</html>