用js實(shí)現(xiàn)的3D特效

2009-12-24 綜合應(yīng)用 ℃

<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");
        }

// 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;

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>

相關(guān)特效代碼

熱門特效代碼: 騰訊天氣預(yù)報(bào)的JS代碼; 點(diǎn)擊“添加收藏”代碼; 多款表格邊框單元格特殊效果代碼; CSS 橫向圖片列表; 網(wǎng)站連接速度測試JavaScript代碼; 用CSS為表格添加陰影效果; 綜合搜索引擎代碼; 超級(jí)計(jì)數(shù)器網(wǎng)頁特效代碼; 強(qiáng)迫訪問廣告鏈接代碼; nVida 網(wǎng)站圖片滑動(dòng)切換代碼

推薦特效代碼: 強(qiáng)迫訪問廣告鏈接代碼; 點(diǎn)擊“添加收藏”代碼; CSS 橫向圖片列表; 常用的對(duì)聯(lián)廣告帶關(guān)閉功能; 極品仿windows進(jìn)度條效果; 漂亮的觸發(fā)行變色代碼