//source:Cube_src.js
var Cube; (function() {
function n(b, o, l) {
var i = b;
var h = o;
var k = l;
this.$1 = function() {
this.rx = i;
this.ry = h;
this.$2 = k
};
this.$5 = function(d, e, a) {
var c,
f,
m;
var j,
g;
if (d) {
j = Math.sin(d);
g = Math.cos(d);
f = g * h - j * k;
m = g * k + j * h;
h = f;
k = m
}
if (e) {
j = Math.sin(e);
g = Math.cos(e);
c = g * i - j * k;
m = g * k + j * i;
i = c;
k = m
}
if (a) {
j = Math.sin(a);
g = Math.cos(a);
c = g * i - j * h;
f = g * h + j * i;
i = c;
h = f
}
this.$1()
};
this.$1()
}
function p(j, g, b, o) {
var l = j;
var i = g;
var h = b;
var k = o;
this.$6 = function() {
var d = l.rx;
var e = l.ry;
var a = (i.rx - d) / 2;
var c = (e - i.ry) / 2;
var f = (h.rx - d) / 2;
var m = (e - h.ry) / 2;
return [a, c, f, m, d, e]
};
this.$7 = function() {
return l.$2 + k.$2
};
this.$3 = function() {
return Math.min(l.rx, i.rx, h.rx, k.rx)
};
this.$4 = function() {
return Math.max(l.ry, i.ry, h.ry, k.ry)
}
}
Cube = function() {
var g = 35;
var b = [new n( - 1, +1, +1), new n( + 1, +1, +1), new n( + 1, -1, +1), new n( - 1, -1, +1), new n( - 1, +1, -1), new n( + 1, +1, -1), new n( + 1, -1, -1), new n( - 1, -1, -1)];
var o = [new p(b[0], b[1], b[3], b[2]), new p(b[1], b[5], b[2], b[6]), new p(b[5], b[4], b[6], b[7]), new p(b[4], b[0], b[7], b[3]), new p(b[4], b[5], b[0], b[1]), new p(b[3], b[2], b[7], b[6])];
var l,
i;
var h = [];
var k = [];
var q;
var u = navigator.userAgent;
var r = /MSIE/.test(u);
var w = /Firefox/.test(u);
var s = Math.PI / 180;
function x(d, e) {
var a = h[d];
if (!a) return;
if (e) a.display = "block";
else {
a.display = "none";
return
}
var c = o[d];
var f = c.$6(g);
for (var m = 0; m < 6; m++) f[m] = ((f[m] * 1e6) >> 0) / 1e6;
if (r) {
var j = k[d];
j.M11 = f[0];
j.M21 = f[1];
j.M12 = f[2];
j.M22 = f[3];
a.pixelLeft = l + g * c.$3();
a.pixelTop = i - g * c.$4()
} else {
f[4] = l + g * f[4];
f[5] = i - g * f[5];
if (w) {
f[4] += "px";
f[5] += "px"
}
a[q] = "matrix(" + f.join(",") + ")"
}
}
function t() {
var a = [];
var c;
for (c = 0; c < 6; c++) a[c] = {
id: c,
val: o[c].$7()
};
a.sort(function(d, e) {
return (d.val > e.val) ? -1: 1
});
for (c = 0; c < 6; c++) x(a[c].id, c < 3)
}
function v(d) {
var e = g + g;
if (!r) e -= 2;
d.width = Math.round(e) + "px";
d.height = Math.round(e) + "px"
}
this.setLocate = function(d, e) {
l = d;
i = e;
t()
};
this.setFace = function(d, e) {
if (h[d]) h[d].display = "none";
var a = e.style;
h[d] = a;
a.position = "absolute";
a.left = "0";
a.top = "0";
a.margin = "0";
a.border = "#000 1px solid";
if (r) {
var c = "DXImageTransform.Microsoft.Matrix";
a.filter = "progid:" + c + "(sizingMethod='auto expand')";
k[d] = e.filters[c]
} else {
if (!q) {
if (a.MozTransform != null) q = "MozTransform";
else if (a.WebkitTransform != null) q = "WebkitTransform";
else if (a.OTransform != null) q = "OTransform";
else throw new Error("浏览器不支持");
}
a[q + "Origin"] = "0% 0%"
}
v(a);
t()
};
this.setRadius = function(d) {
g = d;
for (var e = 0, a; e < 8; e++) if (a = h[e]) v(a);
t()
};
this.rotate = function(d, e, a) {
for (var c = 0; c < 8; c++) b[c].$5(s * d, s * e, s * a);
t()
}
};
Cube.FACE_FRONT = 0;
Cube.FACE_RIGHT = 1;
Cube.FACE_BACK = 2;
Cube.FACE_LEFT = 3;
Cube.FACE_TOP = 4;
Cube.FACE_BOTTOM = 5
})()
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>javascript 3d cube display effect-javascript实现的3d球面显示效果</title>
<meta content="分享 JavaScript Cube 1 6 发布 Web 开发 JavaScript" name="Keywords"/>
<meta content="JSCube可以创建一个立方体将6个HTML元素贴在其面上,并支持旋转和缩放,当前最新版本1.6.0,支持IE FireFox Opear Chrome Safari浏览器脚本引用" name="description"/>
</head>
<body>
<a href="search.html">一个有趣的查询效果</a>
<script type="text/javascript" src="Cube.js"></script>
<script type="text/javascript">
var MyFace =
[
{id: Cube.FACE_FRONT, pic: "G1"},
{id: Cube.FACE_BACK, pic: "g2"},
{id: Cube.FACE_LEFT, pic: "o2"},
{id: Cube.FACE_BOTTOM, pic: "l"},
{id: Cube.FACE_RIGHT, pic: "o1"},
{id: Cube.FACE_TOP, pic: "e"}
];
onload = OnLoad;
onresize = OnResize;
document.onmousemove = OnMouseMove;
var GCube = new Cube();
GCube.setRadius(100);
var cx, cy;
var dx, dy;
function OnLoad()
{
var oImg;
OnResize();
GCube.setRadius(50);
for(var i=0; i<6; i++)
{
oImg = document.createElement("img");
//oImg.src = "res/" + MyFace[i].pic + ".gif";
oImg.src = MyFace[i].pic + ".gif";
document.body.appendChild(oImg);
GCube.setFace(MyFace[i].id, oImg);
}
setInterval(OnTimer, 16);
}
function OnResize()
{
var de = document.documentElement;
cx = de.clientWidth / 2;
cy = de.clientHeight / 2;
GCube.setLocate(cx, cy);
}
function OnMouseMove(e)
{
e = e || event;
dx = e.clientX - cx;
dy = e.clientY - cy;
}
function OnTimer()
{
GCube.rotate(dy/50, -dx/50);
}
</script>
</body>
</html>