非常酷的页面综合效果
<title>非常酷的综合效果</title>
<BODY bgColor=#000000 onload=Setting()>
<P align=center> </P>
<P align=center> </P>
<P align=center> </P>
<P align=center> </P>
<P align=center> </P>
<P align=center><u><font face="Arial Black" color="#8080FF">javascript</font></u></P>
<SPAN id=Set
style="FONT: bold 24pt arial; POSITION: relative; VISIBILITY: hidden">
<P> </P>
<P><font color="#FFFF00">Welcome to I - TIME ！</font><BR></SPAN></P>
<DIV id=Text1
style="COLOR: white; FONT: bold 16pt arial; POSITION: absolute; VISIBILITY: hidden">
<P>欢迎来到</P></DIV>
<DIV id=Text2
style="COLOR: red; FONT: bold 20pt arial; POSITION: absolute; VISIBILITY: hidden">
<P> javascript </P></DIV>
<DIV id=Text3
style="COLOR: blue; FONT: bold 26pt arial; POSITION: absolute; VISIBILITY: hidden">
<P><BIG>页面特效</BIG></P></DIV>
<DIV id=Text4
style="COLOR: black; FONT: bold 16pt arial; POSITION: absolute; VISIBILITY: hidden"></DIV>
<DIV id=Title2
style="COLOR: gray; FONT: bold 24pt arial; POSITION: absolute; VISIBILITY: hidden">
<P>精彩javascript <BR>网页特效观止</P></DIV>
<DIV id=Title1
style="color: white; font-style: normal; font-variant: normal; font-weight: bold; font-size: 24pt; font-family: arial; position: absolute; visibility: hidden; left: 13; top: 101; width: 700; height: 93">
<P>精彩javascript <BR>网页特效观止</P></DIV>
<DIV id=Circle0
style="COLOR: steelblue; FONT: bold 11pt arial; POSITION: absolute; VISIBILITY: hidden">
<P><FONT size=4>欢</FONT></P></DIV>
<DIV id=Circle1
style="COLOR: steelblue; FONT: bold 11pt arial; POSITION: absolute; VISIBILITY: hidden">
<P><FONT size=4>迎</FONT></P></DIV>
<DIV id=Circle2
style="COLOR: steelblue; FONT: bold 11pt arial; POSITION: absolute; VISIBILITY: hidden">
<P><FONT size=4>光</FONT></P></DIV>
<DIV id=Circle3
style="COLOR: steelblue; FONT: bold 11pt arial; POSITION: absolute; VISIBILITY: hidden">
<P><FONT size=4>临</FONT></P></DIV>
<DIV id=Circle4
style="COLOR: steelblue; FONT: bold 11pt arial; POSITION: absolute; VISIBILITY: hidden">
<P><FONT color=#ffff00 size=4>＊</FONT></P></DIV>
<DIV id=Circle5
style="COLOR: steelblue; FONT: bold 11pt arial; POSITION: absolute; VISIBILITY: hidden">
<P><FONT color=#ff0000 size=4>页</FONT></P></DIV>
<DIV id=Circle6
style="COLOR: steelblue; FONT: bold 11pt arial; POSITION: absolute; VISIBILITY: hidden">
<P><FONT color=#ff0000 size=4>面</FONT></P></DIV>
<DIV id=Circle7
style="COLOR: orange; FONT: bold 11pt arial; POSITION: absolute; VISIBILITY: hidden">
<P><FONT color=#ff0000 size=4>特</FONT></P></DIV>
<DIV id=Circle8
style="COLOR: pink; FONT: bold 11pt arial; POSITION: absolute; VISIBILITY: hidden">
<P><FONT color=#ff0000 size=4>效</FONT></P></DIV>
<DIV id=Circle9
style="COLOR: pink; FONT: bold 11pt arial; POSITION: absolute; VISIBILITY: hidden">
<P><FONT color=#ff0000 size=4>站</FONT></P></DIV>
<DIV id=Circle10
style="COLOR: orange; FONT: bold 11pt arial; POSITION: absolute; VISIBILITY: hidden">
<P><FONT size=4>*</FONT></P></DIV>
<DIV id=Circle11
style="COLOR: lightseagreen; FONT: bold 11pt arial; POSITION: absolute; VISIBILITY: hidden">
<P><FONT color=#8080ff size=4>热</FONT></P></DIV>
<DIV id=Circle12
style="COLOR: lightseagreen; FONT: bold 11pt arial; POSITION: absolute; VISIBILITY: hidden">
<P><FONT color=#8080ff size=4>烈</FONT></P></DIV>
<DIV id=Circle13
style="COLOR: lightseagreen; FONT: bold 11pt arial; POSITION: absolute; VISIBILITY: hidden">
<P><FONT color=#8080ff size=4>欢</FONT></P></DIV>
<DIV id=Circle14
style="COLOR: lightseagreen; FONT: bold 11pt arial; POSITION: absolute; VISIBILITY: hidden">
<P><FONT color=#8080ff size=4>迎</FONT></P></DIV>
<DIV id=Circle15
style="COLOR: lightseagreen; FONT: bold 11pt arial; POSITION: absolute; VISIBILITY: hidden">
<P><FONT color=#8080ff size=4>光</FONT></P></DIV>
<DIV id=Circle16
style="COLOR: orange; FONT: bold 11pt arial; POSITION: absolute; VISIBILITY: hidden">
<P><FONT color=#8080ff size=4>临</FONT></P></DIV>
<DIV id=Circle17
style="COLOR: lemonchiffon; FONT: bold 11pt arial; POSITION: absolute; VISIBILITY: hidden">
<P><FONT color=#8080ff size=4>我</FONT></P></DIV>
<DIV id=Circle18
style="COLOR: lemonchiffon; FONT: bold 11pt arial; POSITION: absolute; VISIBILITY: hidden">
<P><FONT color=#8080ff size=4>的</FONT></P></DIV>
<DIV id=Circle19
style="COLOR: lemonchiffon; FONT: bold 11pt arial; POSITION: absolute; VISIBILITY: hidden">
<P><FONT color=#8080ff size=4>站</FONT></P></DIV>
<DIV id=Circle20
style="COLOR: lemonchiffon; FONT: bold 11pt arial; POSITION: absolute; VISIBILITY: hidden">
<P><FONT color=#8080ff size=4>点</FONT></P></DIV><DIV id=Circle21
style="COLOR: lemonchiffon; FONT: bold 11pt arial; POSITION: absolute; VISIBILITY: hidden">
<P><FONT color=#ff80c0 size=4>*</FONT></P></DIV>
<DIV id=Circle22
style="COLOR: lemonchiffon; FONT: bold 11pt arial; POSITION: absolute; VISIBILITY: hidden">
<P><FONT color=#ff0000 size=4>记</FONT></P></DIV>
<DIV id=Circle23
style="COLOR: lemonchiffon; FONT: bold 11pt arial; POSITION: absolute; VISIBILITY: hidden">
<P><FONT color=#ff0000 size=4>住</FONT></P></DIV>
<DIV id=Circle24
style="COLOR: lemonchiffon; FONT: bold 11pt arial; POSITION: absolute; VISIBILITY: hidden">
<P><FONT color=#ff0000 size=4>网</FONT></P></DIV>
<DIV id=Circle25
style="COLOR: lemonchiffon; FONT: bold 11pt arial; POSITION: absolute; VISIBILITY: hidden">
<P><FONT color=#ff0000 size=4>址</FONT></P></DIV>
<DIV id=Circle26
style="COLOR: lemonchiffon; FONT: bold 11pt arial; POSITION: absolute; VISIBILITY: hidden">
<P><FONT color=#ff80c0 size=4>*</FONT></P></DIV>
<DIV id=Now
style="COLOR: orange; FONT: bold 24pt arial; POSITION: absolute; VISIBILITY: hidden"></DIV>
<DIV id=Title3
style="COLOR: orange; FONT: bold 24pt arial; POSITION: absolute; VISIBILITY: hidden"></DIV>
<DIV id=Add
style="FONT: bold 24pt arial; POSITION: absolute; TEXT-ALIGN: right; VISIBILITY: hidden; WIDTH: 250px"></DIV>
<DIV id=Entry
style="FONT: bold 24pt arial; POSITION: absolute; TEXT-ALIGN: right; VISIBILITY: hidden; WIDTH: 250px">
<P> </P></DIV>
<SCRIPT>
var IsIE4 = (navigator.appVersion.charAt(0) >= 4 && navigator.appName == "Microsoft Internet Explorer");
var IsNN4 = (navigator.appVersion.charAt(0) >= 4 && navigator.appName == "Netscape");
var Title1,Title2,Title3,Text1,Text2,Text3,Text4,Now,Add,Entry;
var CenterX,CenterY,Pi,Inc;
var Circle = new Array();
var Pos = new Array();
var NowLeft,NowTop;
var Count = 0;
var Bright = 0;
var Brightfold = true;
var ColorIndex = "0123456789ABCDEFFF";
if(!(IsIE4||IsNN4))
top.location="building.html";
function SetCenter()
{
this.left = (innerWidth - this.clip.width) / 2;
this.top = (innerHeight - this.clip.height) / 2;
}
function Setting()
{
var doc = (IsNN4)? "document." : "document.all.";
var obj = (IsNN4)? "" : ".style";
Title1 = eval(doc+"Title1"+obj);
Title2 = eval(doc+"Title2"+obj);
Title3 = eval(doc+"Title3"+obj);
Text1 = eval(doc+"Text1"+obj);
Text2 = eval(doc+"Text2"+obj);
Text3 = eval(doc+"Text3"+obj);
Text4 = eval(doc+"Text4"+obj);
Now = eval(doc+"Now"+obj);
Add = eval(doc+"Add"+obj);
Entry = eval(doc+"Entry"+obj);
for(i=0;i<=25;i++) Circle[i] = eval(doc+"Circle"+i+obj);
if(IsNN4)
{
Layer.prototype.setCenter = SetCenter;
LayerWidth = document.Set.clip.width;
LayerHeight = document.Set.clip.height;
BodyWidth = innerWidth;
BodyHeight = innerHeight;
Title1.setCenter();
Title2.setCenter();
Title3.setCenter();
Entry.setCenter();
Now.setCenter();
Title1.top = Title1.top - 24;
Title2.top = Title2.top - 24;
Title3.top = Title3.top - 24;
Now.top = Entry.top - 90;
Now.left = Entry.left - 110;
Entry.top = Entry.top + 30;
Entry.left = Entry.left + 35;
}
else
{
BodyWidth = document.body.offsetWidth;
BodyHeight = document.body.offsetHeight;
LayerWidth = document.all.Set.offsetWidth;
LayerHeight = document.all.Set.offsetHeight;
SetLeft = (BodyWidth - LayerWidth) / 2;
SetTop = (BodyHeight - LayerHeight) / 2;
Title1.left = SetLeft;
Title1.top = SetTop - 24;
Title2.left = SetLeft;
Title2.top = SetTop - 24;
Title3.left = SetLeft;
Title3.top = SetTop - 24;
Now.left = SetLeft - 55;
Now.top = SetTop - 65;
Add.left = SetLeft + 85;
Add.top = SetTop + 55;
Entry.left = SetLeft + 85;
Entry.top = SetTop + 75;
}
CenterX = BodyWidth / 2 - 5;
CenterY = BodyHeight / 2 - 5;
Radius = 160;
Pi = Math.PI;
Inc = Pi/180;
Pos[0] = 0;
for(i=1;i<Circle.length;i++) Pos[i] = parseFloat(Pos[i-1] + ((2*Pi)/Circle.length));
for(i=0;i<Pos.length;i++)
{
Pos[i] = Pos[i] + Inc;
Circle[i].left = Radius*Math.cos(Pos[i]) + CenterX - 5;
Circle[i].top = Radius*Math.sin(Pos[i]) + CenterY - 5;
}
NowLeft = (BodyWidth - LayerWidth) / 2 - 100;
NowTop = (BodyHeight - LayerHeight) / 2 - 115;
MoveText1();
}
function MoveText1()
{
Text1.visibility = "visible";
Text1.left = NowLeft;
Text1.top = NowTop;
NowLeft = NowLeft + 10;
NowTop = NowTop + 5;
if(NowLeft < (BodyWidth - LayerWidth) / 2 - 10 )
MoveText1ID = setTimeout("MoveText1()",50);
else
{
clearTimeout(MoveText1ID);
NowLeft = (BodyWidth - LayerWidth) / 2 + 200;
NowTop = (BodyHeight - LayerHeight) / 2 - 115;
MoveText2();
}
}
function MoveText2()
{
Text2.visibility = "visible";
Text2.left = NowLeft;
Text2.top = NowTop;
NowLeft = NowLeft - 8;
NowTop = NowTop + 5;
if(NowLeft > (BodyWidth - LayerWidth) / 2 + 90 )
MoveText2ID = setTimeout("MoveText2()",50);
else
{
clearTimeout(MoveText2ID);
NowLeft = (BodyWidth - LayerWidth) / 2 - 50;
NowTop = (BodyHeight - LayerHeight) / 2 + 115;
MoveText3();
}
}
function MoveText3()
{
Text3.visibility = "visible";
Text3.left = NowLeft;
Text3.top = NowTop;
NowLeft = NowLeft + 10;
NowTop = NowTop - 5;
if(NowLeft < (BodyWidth - LayerWidth) / 2 + 50 )
MoveText3ID = setTimeout("MoveText3()",50);
else
{
clearTimeout(MoveText3ID);
NowLeft = (BodyWidth - LayerWidth) / 2 + 200;
NowTop = (BodyHeight - LayerHeight) / 2 + 115;
MoveText4();
}
}
function MoveText4()
{
Text4.visibility = "visible";
Text4.left = NowLeft;
Text4.top = NowTop;
NowLeft = NowLeft - 5;
NowTop = NowTop - 2;
if(NowLeft > (BodyWidth - LayerWidth) / 2 + 150 )
MoveText4ID = setTimeout("MoveText4()",50);
else
{
clearTimeout(MoveText4ID);
Fade();
}
}
function Fade()
{
var BackX = Math.random()*10;
var BackY = Math.random()*5;
if(Count<=50)
{
if(Math.random()<0.5)
{
BackX = -BackX;
BackY = -BackY;
}
Title1.visibility = "visible";
Title2.visibility = "visible";
Title2.left = parseInt(Title1.left) + BackX;
Title2.top = parseInt(Title1.top) + BackY;
FadeID = setTimeout("Fade()",50);
Count++;
}
else
{
Text1.visibility = "hidden";
Text2.visibility = "hidden";
Text3.visibility = "hidden";
Text4.visibility = "hidden";
Title1.visibility = "hidden";
Title2.visibility = "hidden";
clearTimeout(FadeID);
setInterval("Last()",10);
}
}
function Last()
{
var ColorHex = ColorIndex.charAt(Bright);
ColorHex = ColorHex + ColorHex + ColorHex + ColorHex + ColorHex + ColorHex;
if(IsIE4)
Add.visibility = "visible";
Now.visibility = "visible";
Entry.visibility = "visible";
for (i=0;i<Pos.length;i++) Circle[i].visibility = "visible";
Title3.visibility = "visible";
if(IsIE4)
{
Title3.color = ColorHex;
if(Bright >= 17) Brightfold = false;
if(Bright <= 0) Brightfold = true;
if(Brightfold)
Bright++;
else
Bright--;
}
for(i=0;i<Pos.length;i++)
{
Pos[i] = Pos[i] - Inc;
Circle[i].left = Radius*Math.cos(Pos[i]) + CenterX - 5;
Circle[i].top = Radius*Math.sin(Pos[i]) + CenterY - 5;
}
}
</SCRIPT>
文章评论
共有 0 位网友发表了评论 此处只显示部分留言 点击查看完整评论页面