位置：首页>> 网络编程>> JavaScript>> JS图形技术的终极体现

JS图形技术的终极体现

作者：ningxiaoxian　来源：无忧脚本　发布时间：2008-04-30 19:43:00　

标签：图形,动画,js,firefox

js也是可以做出狂炫的图形的，恭请超级高手分析。

给大家看个例子吧。
http://www.p01.org/releases/DHTML_contests/files/20lines_twinkle/

只用20行（关键函数部分的行数）看看做出来的效果。

注意IE是看不了的，只支持firefox3和opera9.5

下面是静态效果。在firefox3里面是动态光影效果。

有高手能帮忙分析分析就好了。里面有一些数学函数和感觉不知道从哪里来的数字。

下面是其他一些作品，也许大家见过，没有见过的就学习一下吧。都挺有意思的。

注意firefox3有一些无法显示，还得用IE。比较麻烦。

<body bgcolor=0 scroll=no><script>s=[];d=[];D=document;for(i=4;i++<24;){s[i]=9;d[i]=1;D.write('<div style="border:dashed rgb('+i*10+','+i*3+',0)">')}setInterval("for(i in s)D.all[i].style.borderWidth=s[i]+=d[i]*=(!s[i]||s[i]>40-i)?-1:1",55)</script>

<input id=f style=filter:Light;height:200;width:200><script>m=Math.sin;s=f.filters.Light;t=1;c=1;x=255;function a(){s.clear();for(i=0;i<15;){g=m(i*t+c)*i++;s.addPoint(99+g*6,99-m(i*t+c)*i*6,g,99,x,x,x)}c+=.1;if(c>t*15)t++;setTimeout('a()',1)}a()</script>

<center>Wassssup!<BR><input id=K style=filter:Light;height:400;width:600><script>C=Math.cos;L=K.filters.Light;F=setInterval("F++;L.clear();for(A=9;A<55;A+=3){e=(A+F)/5;x=A*C(e)*6;y=A*C(e+F/9)*3;L.addPoint(300-x,200+y,A*2,A*6,192-x,99+y,99);}",8)</script>

<body id=K style=Filter:Light><script>I=255;M=Math.cos;L=K.filters.Light;F=setInterval("L.clear();for(A=9;A<70;A+=9)L.addPoint(I+A*M(++F/A)*3,I+A*M(F/A/2)*3,70,I,I,I,I)",9)</script>

ody style=overflow:hidden><script>for(i=0;i<9999;i+=10)document.write('<p style=position:absolute;left:'+i+';top:0;height:'+(50-5*(Math.sin(.00125*i)+Math.cos(.005*i)))+'％;background-color:#000>@</p>');setInterval('scrollTo(20*(++i％250))',12)</script>

<body id=B background=v><tt id=F style=position:absolute;font-size:390>poi<script>A=setInterval("B.style.backgroundPositionX=A--;F.style.left=4*(A&511)-768;F.style.top=64-192*Math.sin((A&63)/21)",9)</script>

投稿

JS图形技术的终极体现

猜你喜欢