一個有趣的JavaScript波浪特效

2024-09-05 12:22:44

字體：大中小

來源：轉載

供稿：網友

一個有趣的JavaScript波浪特效，看上去還差不多，挺逼真的，一浪接一浪，很有感覺……

<html><head><title>JavaScript波浪特效</title><script> var defaultString="........................."; parentID="area";    vala=160;  valc=255;  cc1=0;   cc2=0;  fontsize=70;   posleft=120;   postop=50;    function q1() {  for(i=0;i<7;i++) {node=document.getElementById(parentID);beforediv=document.createElement("DIV");   cc1=255*(i/11);   cc2=160*(i/11);      gfx1=parseInt(vala-cc2);        gfx2=parseInt(valc-cc1);     str="position:absolute;top:"+postop+"px;left:"+posleft+"px;color:rgb("+gfx1+","+gfx1+","+gfx2+");width:260px;height:100px;font-size:"+fontsize+"pt;";   if (navigator.userAgent.indexOf("Gecko")>-1)    beforediv.setAttribute("style",str);   else    beforediv.style.cssText = str;    beforediv.setAttribute("id","object"+i);   newText=document.createTextNode(defaultString);   beforediv.appendChild(newText);   node.appendChild(beforediv);   fontsize+=2;   posleft+=5;   postop-=(3-((i/20)*2));  }setTimeout("a3danimation()",100); }  ox=100;     oy=100;   pi=3.141516*2;   ccounter=0;  ww=10;    function a3danimation() {  ww-=.1;     ccounter++;    if(ccounter<350) {   for(i=0;i<7;i++) {    pis=pi*(ccounter/70)+(i/ww);    posx=i*10+ox-20+(Math.cos(pis)*5*i*ww/20);    posy=oy+(Math.sin(pis)*10*i*ww/5);    document.getElementById("object"+i).style.left=posx+"px";    document.getElementById("object"+i).style.top=posy+"px";   }   setTimeout("a3danimation()",30);  } else {   ccounter=0;   ww=10;   setTimeout("a3danimation()",30);  } }</script></head><body onload="q1()" bgcolor="#a0a0ff" text="white"><div   class="70qarhlowxag"   id="area" style="position:absolute;left:96px;top:60px;color:rgb(0,0,255)"></div></body></html>

上一篇：JavaScript獲取url字符串參數的方法

下一篇：JavaScript打造的3D旋轉立方體