<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>
<a href="http://js.alixixi.com/">欢迎访问阿里西西网页特效代码站,js.alixixi.com</a>
来自:http://www.alixixi.com/Dev/HTML/jsrun/zh/2008/2008070580377.html
分享到:
相关推荐
用js实现的3D特效
js实现3D烟花特效,视觉盛宴,自带爆炸音效,浪漫表白代码,程序员必看! js实现3D烟花特效,视觉盛宴,自带爆炸音效,浪漫表白代码,程序员必看! js实现3D烟花特效,视觉盛宴,自带爆炸音效,浪漫表白代码,程序员...
JS实现3D蜂巢特效,炫酷网页效果 JS实现3D蜂巢特效,炫酷网页效果 JS实现3D蜂巢特效,炫酷网页效果 JS实现3D蜂巢特效,炫酷网页效果 JS实现3D蜂巢特效,炫酷网页效果 JS实现3D蜂巢特效,炫酷网页效果 JS实现3D蜂巢...
网页模板——基于threejs实现3D爆炸碎片轮播图特效
基于threejs实现3D爆炸碎片轮播图特效.zip
js实现的3d效果(很炫+转载),大家可以学习一下。
3D球体标签云源代码,JavaScript CSS实现的特效,看上去非常漂亮,并且可以响应鼠标旋转,具体的大家下载源码后自己测试吧,特效截图如下:
此js 的效果可以再平面呈现出3D 的特效。有兴趣的朋友可以下载下来学习学习。的确很牛! 脚本是纯 JS 代码。用平面实现了 立体效果。很震撼。
js css3实现3D骰子特效
js实现海洋中水母跟随鼠标运动特效,绚丽3D运动,前端小白必看! js实现海洋中水母跟随鼠标运动特效,绚丽3D运动,前端小白必看! js实现海洋中水母跟随鼠标运动特效,绚丽3D运动,前端小白必看! js实现海洋中水母...
js+css实现彩色网格雨3D特效,绚丽多彩,高分web应用代码! js+css实现彩色网格雨3D特效,绚丽多彩,高分web应用代码! js+css实现彩色网格雨3D特效,绚丽多彩,高分web应用代码! js+css实现彩色网格雨3D特效,绚丽...
这是一款基于Cannon.js和Three.js的3d文字特效。该特效在屏幕上构建炫酷的3D文字特效,鼠标可以和文字进行交互。
JavaScript 3D开源框架three.min.js实现3d森林瀑布流特效源码
用js实现的3D特效
jquery实现3D反转焦点图特效代码下载
js+css3实现3D骰子特效是一款滚动鼠标滚轮时可以放大,骰子会慢慢的变形一直到可以看骰子里的世界,效果非常棒。
基于JavaScript,echarts库实现的3D动态可拖拽的炫酷地球,宇宙星空背景,html5,canvas
3D炫酷实时时钟翻转动画带倒影特效为您带来实时时钟带晃动动画js特效效果,超炫酷3D实时时钟翻转动画带倒影特效js,秒数随着翻转而翻转,纯js实现时钟翻转动画带带倒影特效。
一款小清新风格基于three.js实现的炫酷Canvas 3D线条背景动画特效,挺酷的效果。
这是一款基于threejs的3D爆炸碎片轮播图特效。该特效使用threejs来制作轮播图在切换时的爆炸特效,图片爆炸成碎片,然后组合为下一张新的图片,效果非常炫酷。