网页制作特效代码园地
用js实现的3D特效
www.qpsh.com 更新日期：2008-7-31 人气指数 1182
<html xmlns:v="urn:schemas-microsoft-com:vml"> <head> <title>3dtest2</title> <script language="JavaScript"><!-- // abc var d = document; var isNav, isIE, isNS6; if(d.layers) {isNav = 1;} else if(d.all) {isIE = 1;} else if (d.getElementByID) {isNS6 = 1;} if(!isIE) { alert("this experiment requires IE, as it uses VML"); } function mousemove(e) { if (isIE) { mx = window.event.clientX; my = window.event.clientY; } else { mx = e.pageX; my = e.pageY; } } if (isNav) document.captureEvents(Event.MOUSEMOVE); document.onmousemove = mousemove; // vertex definitions: x,y,z,xp,yp var b1 = new Array(-40,40,-40,0,0); var b2 = new Array(-40,40,40,0,0); var b3 = new Array(40,40,40,0,0); var b4 = new Array(40,40,-40,0,0); var b5 = new Array(-40,-40,-40,0,0); var b6 = new Array(-40,-40,40,0,0); var b7 = new Array(40,-40,40,0,0); var b8 = new Array(40,-40,-40,0,0); function project(vert, obj) { vert[3] = Math.floor((vert[0] * dist) / (vert[2] + dist + 40)); vert[4] = Math.floor((vert[1] * dist) / (vert[2] + dist + 40)); } function xrotate(vert, deg) { cos1 = costable[deg]; sin1 = sintable[deg]; y = vert[1]; z = vert[2]; vert[1] = (cos1*y) - (sin1*z); vert[2] = (sin1*y) + (cos1*z); } function yrotate(vert, deg) { cos1 = costable[deg]; sin1 = sintable[deg]; x = vert[0]; z = vert[2]; vert[0] = (cos1*x) + (sin1*z); vert[2] = (cos1*z) - (sin1*x); } function zrotate(vert, deg) { cos1 = costable[deg]; sin1 = sintable[deg]; x = vert[0]; y = vert[1]; vert[0] = (cos1*x) - (sin1*y); vert[1] = (sin1*x) + (cos1*y); } var dist = 90; var mx = 100,my = 100; var p1,p2,p3,p4,p5,p6,p7,p8; var xcenter, ycenter; var sintable = new Array(360); var costable = new Array(360); function startup() { for(i=-360;i<=360;i++) { costable[i] = Math.cos(i*0.017454); sintable[i] = Math.sin(i*0.017454); } main(); } function amod(vert, lyr, img, xr, yr, zr) { project(vert); xrotate(vert,yr); yrotate(vert,xr); //zrotate(vert,zr); } /* b2--b3 / / | b1--b4 | | b6--b7 | / / b5--b8 */ var v1path, v2path, v3path, v4path; var scrtch = 0; function swip() { if(scrtch == "1") { scrtch = 0; c1.path = "m"; c2.path = "m"; c3.path = "m"; c4.path = "m"; } else { scrtch = 1; } } function main() { if(scrtch == "1") { c1.path = v1path; c2.path = v2path; c3.path = v3path; c4.path = v4path; } xr = -Math.floor((mx-350)/80); if(xr > 6) {xr = 6}; yr = Math.floor((my-250)/80); if(yr > 6) {yr = 6}; zr = 0; for(i=1;i<=8;i++) { eval("amod(b"+i+",p"+i+",'i"+i+"', xr, yr, zr)"); } v1path = "m "+b1[3]+","+b1[4]+" l "+b2[3]+","+b2[4]+" "+b3[3]+","+b3[4]+" "+b4[3]+","+b4[4]+" x e"; v2path = "m "+b5[3]+","+b5[4]+" l "+b6[3]+","+b6[4]+" "+b7[3]+","+b7[4]+" "+b8[3]+","+b8[4]+" x e"; v3path = "m "+b1[3]+","+b1[4]+" l "+b2[3]+","+b2[4]+" "+b6[3]+","+b6[4]+" "+b5[3]+","+b5[4]+" x e"; v4path = "m "+b3[3]+","+b3[4]+" l "+b4[3]+","+b4[4]+" "+b8[3]+","+b8[4]+" "+b7[3]+","+b7[4]+" x e"; v1.path = v1path; v2.path = v2path; v3.path = v3path; v4.path = v4path; setTimeout('main()','20'); } //--></script> <style type="text/css"> v\:*{behavior:url(#default#VML);} body {font-family: verdana, arial; font-size:10px; color:white;} input, select, .cb {background-color: #BB0000; padding:3px;font-family:verdana, helvetica, arial; font-size:10px; border: 0 solid; border-color: #C0E0C0; color:#FFFFFF;} a:link, a:visited, a:active {font-family: verdana, arial; font-size:10px; color:white;} a:hover {font-family: verdana, arial; font-size:10px; color:red;} </style> </head> <body onload="startup();" bgcolor="#000000"> <v:shape id="c1" filled="false" strokecolor="#ff8888" style="visibility:visible;position:absolute;left:300;top:400;width:200;height:200" coordorigin="0, 100" coordsize="100,100"><v:path v="m 0,0 l x e"/></v:shape> <v:shape id="c2" filled="false" strokecolor="#ff8888" style="visibility:visible;position:absolute;left:300;top:400;width:200;height:200" coordorigin="0, 100" coordsize="100,100"><v:path v="m 0,0 l x e"/></v:shape> <v:shape id="c3" filled="false" strokecolor="#ff8888" style="visibility:visible;position:absolute;left:300;top:400;width:200;height:200" coordorigin="0, 100" coordsize="100,100"><v:path v="m 0,0 l x e"/></v:shape> <v:shape id="c4" filled="false" strokecolor="#ff8888" style="visibility:visible;position:absolute;left:300;top:400;width:200;height:200" coordorigin="0, 100" coordsize="100,100"><v:path v="m 0,0 l x e"/></v:shape> <v:shape id="v1" filled="false" strokecolor="white" style="visibility:visible;position:absolute;left:300;top:400;width:200;height:200" coordorigin="0, 100" coordsize="100,100"><v:path v="m 0,0 l 100,100 200,50 x e"/></v:shape> <v:shape id="v2" filled="false" strokecolor="white" style="visibility:visible;position:absolute;left:300;top:400;width:200;height:200" coordorigin="0, 100" coordsize="100,100"><v:path v="m 0,0 l 100,100 200,50 x e"/></v:shape> <v:shape id="v3" filled="false" strokecolor="white" style="visibility:visible;position:absolute;left:300;top:400;width:200;height:200" coordorigin="0, 100" coordsize="100,100"><v:path v="m 0,0 l 100,100 200,50 x e"/></v:shape> <v:shape id="v4" filled="false" strokecolor="white" style="visibility:visible;position:absolute;left:300;top:400;width:200;height:200" coordorigin="0, 100" coordsize="100,100"><v:path v="m 0,0 l 100,100 200,50 x e"/></v:shape> <div style="position:absolute; top:75px; left:122px; width:200;" align="justify"> <br> <br> <select onchange="dist = Math.floor(this.value);"> <option value="40">super high</option> <option value="50">high</option> <option value="90" selected>normal</option> <option value="200">low</option> <option value="10000">super low</option> </select> </div> </body> </html>
【返回首页】【刷新本页】【返回顶部】【关闭本页】
本类热门
7/15/2008
9/25/2008
9/13/2007
8/3/2008
9/9/2007
12/25/2007
9/15/2007
本类最新
7/31/2008
7/26/2008
7/16/2008
最具人气
36022
22797
18792
17991
17768
14365
14231
12149
常用特效
2474
5183
2408
2435
2998
2439
3793
推荐特效
3403
6665
2267
1739
5148
10746
11603
2904
CopyRight © 网页特效代码 2006 - 2007 Qpsh.Com All rights reserved
