非常酷的页面综合效果

稿源：互联网 2022-08-03 14:04:16 点击： 125 撤稿纠错

非常酷的页面综合效果，阿里西西网页特效收集。

以下讨论的是和特效相关的非常酷的页面综合效果教程文章，内容是本站精心挑选整理的教程，希望对广大的网友给到帮助,下面是详细内容：

脚本代码(For Alixixi.com)如下:

<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>
<a href="http://www.alixixi.com/Dev/HTML/jsrun/">欢迎访问阿里西西网页特效集</a>

关于非常酷的页面综合效果的内容写到这里就结束啦，您可以收藏本页网址https://js.alixixi.com/a/2008071496087.shtml方便下次再访问哦。

·上一篇： 两只逼真的飞舞蝴蝶
·下一篇： 页面左右分开

非常酷的页面综合效果

文章分类LIST >>返回首页

最新游戏

最新新闻