javascript实现的三维正方体(兼容ie7,ff)

通过更新变换矩阵来记录转动(函数remx()).
利用矩阵计算出转动后的正方体顶点坐标,
把各个顶点的空间坐标按”近大远小”转换成平面坐标(函数p2d()),
用正方体各个面的法向量的z坐标判断该面是否可见,
用高为1px的div层模拟画出四边形(函数gra2htm()).
鼠标拖曳的代码用别人的代码修改的.

Cube

function gra2htm(clr,a,b,c,d){
var result='';
var maxx=Math.max(a[0],b[0],c[0],d[0]),minx=Math.min(a[0],b[0],c[0],d[0]);
var maxy=Math.max(a[1],b[1],c[1],d[1]),miny=Math.min(a[1],b[1],c[1],d[1]);
x=new Array(a[0],b[0],c[0],d[0],a[0],b[0],c[0],d[0],a[0],b[0]);
y=new Array(a[1],b[1],c[1],d[1],a[1],b[1],c[1],d[1],a[1],b[1]);

/*/begin
for(var i=0;i

';
}
//end*/

if(maxx-minx>=maxy-miny){
for(var i=3;iy[k-1]){
k--;
xa=(x[k-1]-x[k])/(y[k-1]-y[k]);
}
if(i>y[l+1]){
l++;
xb=(x[l+1]-x[l])/(y[l+1]-y[l]);
}
result+='

';
}
} else {
for(var i=3;ix[k+1]){
k++;
ya=(y[k+1]-y[k])/(x[k+1]-x[k]);
}
if(i>x[l-1]){
l--;
yb=(y[l-1]-y[l])/(x[l-1]-x[l]);
}
result+='

';
}
}
return result;
}
function remx(type,theta,omx){
var sinA=Math.sin(theta),cosA=Math.cos(theta);
var m=new Array();
switch(type){
case 'rx':
m[0]=omx[0];m[1]=omx[1];m[2]=omx[2];
m[3]=omx[3]*cosA-omx[6]*sinA;m[4]=omx[4]*cosA-omx[7]*sinA;m[5]=omx[5]*cosA-omx[8]*sinA;
m[6]=omx[3]*sinA+omx[6]*cosA;m[7]=omx[4]*sinA+omx[7]*cosA;m[8]=omx[5]*sinA+omx[8]*cosA;
break;
case 'ry':
m[0]=omx[0]*cosA-omx[6]*sinA;m[1]=omx[1]*cosA-omx[7]*sinA;m[2]=omx[2]*cosA-omx[8]*sinA;
m[3]=omx[3];m[4]=omx[4];m[5]=omx[5];
m[6]=omx[0]*sinA+omx[6]*cosA;m[7]=omx[1]*sinA+omx[7]*cosA;m[8]=omx[2]*sinA+omx[8]*cosA;
break;
}
return m;
}
function p2d(x,y,z){
var l=100,t=100;
var result=new Array();
result[0]=Math.round(l+x/(z*0.004+1.25));
result[1]=Math.round(t+y/(z*0.004+1.25));
return result;
}

//const
var pa=new Array();
pa[1]=new Array(50,50,-50);
pa[2]=new Array(50,50,50);
pa[3]=new Array(50,-50,50);
pa[4]=new Array(50,-50,-50);
pa[5]=new Array(-50,50,-50);
pa[6]=new Array(-50,50,50);
pa[7]=new Array(-50,-50,50);
pa[8]=new Array(-50,-50,-50);
var idx=new Array();
idx[0]=new Array(1,2,3,4);
idx[1]=new Array(1,4,8,5);
idx[2]=new Array(1,5,6,2);
idx[3]=new Array(7,3,2,6);
idx[4]=new Array(7,8,4,3);
idx[5]=new Array(7,6,5,8);
var clr=new Array('#03c','#c00','#fc0','#f60','#fff','#090');
//end
function cube(id){
if(!document.getElementById(id)) return false;
this.id=document.getElementById(id);
this.angle=new Array();
this.angle2=new Array();
for(i=1;i

var tmr=(new Date()).getTime();
function drag(obj,e){
e=e?e:window.event;
var setx=e.clientX,sety=e.clientY;

if(document.addEventListener){
document.addEventListener('mousemove', inFmove, true);
document.addEventListener('mouseup', inFup, true);
} else if(document.attachEvent){
document.attachEvent('onmousemove', inFmove);
document.attachEvent('onmouseup', inFup);
}

function inFmove(e){
tmr2=(new Date).getTime();
if(tmr2-tmr

var tt,cc=new cube('t');
cc.roll('ry',1);
cc.paint();

[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

(0)

相关推荐

  • javascript实现的三维正方体(兼容ie7,ff)

    通过更新变换矩阵来记录转动(函数remx()). 利用矩阵计算出转动后的正方体顶点坐标, 把各个顶点的空间坐标按"近大远小"转换成平面坐标(函数p2d()), 用正方体各个面的法向量的z坐标判断该面是否可见, 用高为1px的div层模拟画出四边形(函数gra2htm()). 鼠标拖曳的代码用别人的代码修改的. Cube function gra2htm(clr,a,b,c,d){ var result=''; var maxx=Math.max(a[0],b[0],c[0],d[0])

  • CSS hack实现 CSS完美兼容IE6/IE7/FF的通用方法

    关于CSS对各个浏览器兼容已经是老生常谈的问题了, 网络上的教程遍地都是.以下内容没有太多新颖, 纯属个人总结, 希望能对初学者有一定的帮助. 一.CSS HACK 以下两种方法几乎能解决现今所有HACK. 1, !important 随着IE7对!important的支持, !important 方法现在只针对IE6的HACK.(注意写法.记得该声明位置需要提前.) <style> #wrapper { width: 100px!important; /* IE7+FF */ width: 

  • JavaScript 无缝上下左右滚动加定高定宽停顿效果(兼容ie/ff)

    JavaScript 无缝上下滚动加定高定宽停顿效果(兼容ie/ff) JavaScript 无缝上下滚动加定高定宽停顿效果(兼容ie/ff) var $ = function (id) { return "string" == typeof id ? document.getElementById(id) : id; }; var Class = { create: function() { return function() { this.initialize.apply(this

  • JavaScript 获取/设置光标位置,兼容Input&&TextArea

    JavaScript 获取/设置光标位置,兼容Input&&TextArea. body { margin: 32px; font-family: Verdana, sans-serif; font-size: 13px; } .title { font-size: 18px; font-weight: bolder;margin:40px 0; } .input { width: 50%; font-family: Verdana, sans-serif; font-size: 13px

  • javascript checkbox/radio onchange不能兼容ie8处理办法

    javascript checkbox/radio onchange不能兼容ie8处理办法 在ie8下,checkbox的onchange没能实现触发自定义的函数,如何解决该问题,如下: function forIe(){ if($.browser.msie){ //判断浏览器是否为ie $("input[type='checkbox']").click(function(){ this.blur(); //先失去焦点,执行你的自定义的操作 this.focus();//再获取焦点,是

  • Javascript实现仿WebQQ界面的“浮云”兼容 IE7以上版本及FF

    上图片素材先: 背景图片:浮云图片: ←----------这里是有图片D~ 全选就能看见了(因为背景是白的,云也是白的嘛~)-- CSS代码: 复制代码 代码如下: <style type="text/css"> * { margin: 0; padding: 0; } body { background: url("Images/body_bg.jpg") repeat center 0 fixed; } .cloud { background: u

  • 浏览器兼容解决FF/IE6/IE7背景专用CSS HACK

    自从互联网开始的那一刻起,各浏览器间的争斗就没有停止过.当然其中最苦的就是网页制作人员了,为了达到用户体验以及可用性的标准,不得不在多个浏览器上为统一效果而奔波.真希望哪一天FF可以一统天下,虽然现在还是IE的大天下.特别是微软最新发布的IE7浏览器,其CSS的兼容性确实给一些网页制作人员又添加了一个沉重的新负担. 为了让各浏览器有同样的显示效果,我们不得不用到CSS HACK.当然在这篇文章中我们只谈现在使用率最高的IE6和FF,以及将来可能会成为主流的IE7的CSS HACK,至于IE6以下

  • javascript textarea光标定位方法(兼容IE和FF)

    今天在做一个博客转发的功能,就像新浪微薄转播的那个功能一样,有一个textArea,就是我们发微薄的那个框,别人的微薄都有一个转发的按钮,当我们点击这个转发按钮的时候,他的微薄就会进入到textArea中,看起来很简单的文本框赋值,其实难点就在于,这时候的光标是定位在最前面的. 于是搜索了baidu,google,找到了 IE下面的方法 复制代码 代码如下: var tea=document.getElementById("文本框的ID"); var txt=textArea.crea

  • 去除链接元素的虚线框 兼容IE7、IE6、FF

    推荐下面的代码 复制代码 代码如下: a {outline: none; /* for Forefox */ } a {star:expression(this.onFocus=this.blur()); /* for Ie*/ } 下面的代码比较麻烦 我们采用htc文件的办法来解决这个问题.首页将以下代码保存为link.htc文件. 复制代码 代码如下: <public:attach event="onfocus" onevent="hscfsy()"/&g

  • JavaScript兼容浏览器FF/IE技巧

    做BS开发就难免会用到javascript,而每个浏览器对javascript的支持有不同.这就需要我们程序员去兼容他们,不然有些浏览器就无法运行我们的代码.就会造来客户的投诉,如果让BoSS知道了,这可不太好哦. 下面是兼容IE和FF的js脚本做法和分解(部分选自网上,经本人整理),希望对大家有帮助. .以下以 IE 代替 Internet Explorer,以 MF/FF 代替 Mozzila Firefox //window.event IE:有window.event对象 FF:没有wi

随机推荐