Google Cube，优化过的Google立方体代码

小提示

Ctrl+/代码提示(需IE11)
F11键放大 ESC键缩小
PgUp上页 PgDn下页

推荐代码

运行代码缩小

引入JS
- 3.0.0 2.2.0 2.1.4 2.1.3 2.1.2 2.1.1 2.1.0 2.0.3 2.0.2 2.0.1 2.0.0 1.12.0 1.11.3 1.11.2 1.11.1 1.11.0 1.10.2 1.10.1 1.10.0 1.9.1 1.9.0 1.8.3 1.8.2 1.8.1 1.8.0 1.7.2 1.7.1 1.7 1.6.4 1.6.2 1.6.1 1.4.4 1.4.3 1.4.2 1.4.1 1.4.0
- 1.7.3 1.7.2 1.7.1.0 1.7.0.0
- 2.0.0-beta.0 2.0.0-alpha.55 1.5.0-rc.0 1.4.8 1.4.0 1.3.20 1.2.29 1.1.5 1.0.8
- 1.8.3 1.7.0 1.6.0 1.5.2 1.4.4 1.3.3 1.2.4 1.1.7
- 1.10.4 1.9.7 1.8.10 1.7.8 1.6.3 1.5.4 1.4.6 1.3.3
- core1.6.0 core-compat1.6.0 core1.5.2 core-compat1.5.2 core-full-compat-yc1.4.5 core-full-compat1.4.5 core-full-nocompat-yc1.4.5 core-full-nocompat1.4.5
- 1.4.2 1.4.1 1.4.0 1.3.0 1.2.0 1.1.0
- 3.7.3 3.7.2 3.7.1 3.7.0 3.7 3.6.2 3.6.1 3.6

引入框架
- 1.4.5 1.4.4 1.4.3 1.4.2 1.4.1 1.4.0 1.3.2
- 1.11.4 1.11.3 1.11.2 1.11.1 1.11.0 1.10.4 1.10.3 1.10.2
- 3.3.6 3.3.5 3.3.0 3.2.0 2.3.2

汉王

HTML代码

复制格式化注释注释清空

放大

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Google Cube</title>
<style>
html
{
	overflow: hidden;
}
.face
{
	width: 100%;
	height: 100%;
	background: #FFF;
	text-align: center;
}
.face img
{
	width: 100%;
	height: 25%;
	margin-top: 10%;
}
.face input
{
	margin-top: 8%;
	width: 96%;
	height: 8%;
	border: #666 solid 1px;
}
.face button
{
	margin-top: 8%;
	width: 75%;
	height: 15%;
}
</style>
</head>
<body>

<script>
/****************************************
 * HTML立方体插件 v1.6.1
 *   By EtherDream (c) 2006-2011
 * 最后更新: 2011.1.29
 **/
var Cube;
(function(){
/*******************
 *     |+y
 *     |
 *     0----- +x
 *    /
 *   /+z
 ******************/
function Point(x, y, z)
{
	this.update = function()
	{
		this.rx = x;
		this.ry = y;
		this.deepth = z;	//无限远
	};
	this.rotate = function(radX, radY, radZ)
	{
		var _x, _y, _z;
		var sin, cos;
		if(radX)
		{
			sin = Math.sin(radX);
			cos = Math.cos(radX);
			_y = cos * y - sin * z;
			_z = cos * z + sin * y;
			y = _y;
			z = _z;
		}
		if(radY)
		{
			sin = Math.sin(radY);
			cos = Math.cos(radY);
			_x = cos * x - sin * z;
			_z = cos * z + sin * x;
			x = _x;
			z = _z;
		}
		if(radZ)
		{
			sin = Math.sin(radZ);
			cos = Math.cos(radZ);
			_x = cos * x - sin * y;
			_y = cos * y + sin * x;
			x = _x;
			y = _y;
		}
		this.update();
	};
	this.update();
}
/*****************************
 *   p1--------p2
 *   |          |
 *   p3--------p4
 *****************************/
function Face(P1, P2, P3, P4)
{
	/***************************************************
	 *    P(x,y) + [a,b,c,d,tx,ty]
	 * => P(ax+by+tx, cx+dy+ty)
	 ***************************************************/
	this.getMatrix = function()
	{
		var tx = P1.rx;
		var ty = P1.ry;
		var a = (P2.rx - tx) / 2;
		var b = (ty - P2.ry) / 2;
		var c = (P3.rx - tx) / 2;
		var d = (ty - P3.ry) / 2;
		return [a, b, c, d, tx, ty];
	};
	this.getDeepth = function()
	{
		return P1.deepth + P4.deepth;
	};
	this.getBlockX = function()
	{
		return Math.min(P1.rx, P2.rx, P3.rx, P4.rx);
	};
	this.getBlockY = function()
	{
		return Math.max(P1.ry, P2.ry, P3.ry, P4.ry);
	};
}
Cube = function()
{
	/*******************
	 *    4-------5
	 *   /|      /|
	 *  0-------1 |
	 *  | |     | |
	 *  | 7- - -|-6
	 *  |/      |/
	 *  3-------2
	 *******************/
	var R = 100;
	var P =
	[
		new Point(-1, +1, +1),
		new Point(+1, +1, +1),
		new Point(+1, -1, +1),
		new Point(-1, -1, +1),
	
		new Point(-1, +1, -1),
		new Point(+1, +1, -1),
		new Point(+1, -1, -1),
		new Point(-1, -1, -1)
	];
	var F =
	[
		new Face(P[0], P[1], P[3], P[2]), //前
		new Face(P[1], P[5], P[2], P[6]), //右
		new Face(P[5], P[4], P[6], P[7]), //后
		new Face(P[4], P[0], P[7], P[3]), //左
		new Face(P[4], P[5], P[0], P[1]), //上
		new Face(P[3], P[2], P[7], P[6])  //下
	];
	var cx, cy;
	var bLight;
	var arrInfo = [];
	var KEY_NAME;
	var ver = navigator.userAgent;
	var isIE = /MSIE/.test(ver);
	var isFF = /Firefox/.test(ver);
	var RAD = Math.PI / 180;
	/**
	 * 初始化
	 */
	function Init()
	{
		var FILTER_NAME = "DXImageTransform.Microsoft.Matrix";
		var div, sty, flt;
		for(var i=0; i<6; i++)
		{
			div = document.createElement("div");
			document.body.appendChild(div);
			sty = div.style;
			sty.position = "absolute";
			sty.background = "#000";
			sty.border = "#000 1px solid";
			if(isIE)
			{
				//IE Filter
				sty.filter = "progid:" + FILTER_NAME + "(sizingMethod='auto expand')";
				flt = div.filters[FILTER_NAME];
			}
			else
			{
				//CSS3 transform
				if(!KEY_NAME)
				{
					if(sty.MozTransform != null)			//FireFox
						KEY_NAME = "MozTransform";
					else if(sty.WebkitTransform != null)	//Chrome,Safari
						KEY_NAME = "WebkitTransform";
					else if(sty.OTransform != null)			//Opera
						KEY_NAME = "OTransform";
					else
						throw new Error("浏览器不支持");
				}
				//调整参照点
				sty[KEY_NAME + "Origin"]	= "0% 0%";
			}
			arrInfo[i] = {div:div, sty:sty, flt:flt};
		}
	}
	function setLight(i, val)
	{
		var obj = arrInfo[i].fltElem;
		if(!obj)
			return;
		obj.opacity = isIE? val*100: val;
	}
	function apply(id, visible, opacity)
	{
		var info = arrInfo[id];
		var sty = info.sty;
		if(visible)
			sty.display = "block";
		else			
			return sty.display = "none";
		var face = F[id];
		var m = face.getMatrix(R);
		//0.123456
		for(var i=0; i<6; i++)
			m[i] = ((m[i] * 1e6) >> 0) / 1e6;
		if(isIE)
		{
			//IE Matrix滤镜
			var flt = info.flt;
			flt.M11 = m[0];
			flt.M21 = m[1];
			flt.M12 = m[2];
			flt.M22 = m[3];
			//flt.Dx = cx + R * m[4];
			//flt.Dy = cy - R * m[5];
			sty.pixelLeft = cx + R * face.getBlockX();
			sty.pixelTop = cy - R * face.getBlockY();
		}
		else
		{
			//CSS3
			m[4] = cx + R * m[4];
			m[5] = cy - R * m[5];
			if(isFF)
			{
				m[4] += "px";
				m[5] += "px";
			}
			sty[KEY_NAME] = "matrix(" + m.join(",") + ")";
		}
	}
	function draw()
	{
		var deepth = [];
		var z, i;
		// 深度排序
		for(i=0; i<6; i++)
			deepth[i] = {id:i, val:F[i].getDeepth()};
		deepth.sort(function(a,b){return b.val - a.val});
		//正面
		for(i=0; i<3; i++)
		{
			apply(deepth[i].id, true);
			if(bLight)
			{
				z = (deepth[i].val + 2) / 4;
				setLight(deepth[i].id, z*z);
			}
		}
		//隐面
		for(i=3; i<6; i++)
			apply(deepth[i].id, false);
	}
	function updateSize(sty)
	{
		var D = Math.round(R+R);
		if(!isIE)	//解决边框分离
			D-=2;
		sty.width = D + "px";
		sty.height = D + "px";
	}
	/**
	 * setLocate:
	 *   页面中定位立方体。
	 *   (cx, cy)为立方体中心点坐标
	 */
	this.setLocate = function(_cx, _cy)
	{
		cx = _cx;
		cy = _cy;
		draw();
	};
	/**
	 * setFace:
	 *   立方体贴面。
	 *   id: 立方体面编号
	 *   elem: 页面中的HTML元素
	 */
	this.setFace = function(id, elem)
	{
		var faceInfo = arrInfo[id];
		if(!faceInfo)
			throw new Error("无效的面ID");
		try
		{
			if(faceInfo.elem)
				faceInfo.div.replaceChild(elem, faceInfo.elem);
			else
				faceInfo.div.appendChild(elem);
			//透明度
			if(isIE)
			{
				elem.style.filter = "alpha";
				faceInfo.fltElem = elem.filters["alpha"];
			}
			else
			{
				faceInfo.fltElem = elem.style;
			}
			faceInfo.elem = elem;
		}
		catch(e)
		{
			throw new Error("无效的DOM元素");
		}
	};
	/**
	 * setRadius:
	 *   设置立方体每个面的半径长度
	 */
	this.setRadius = function(r)
	{
		R = r;
		for(var i=0; i<6; i++)
			updateSize(arrInfo[i].sty);
		draw();
	};
	/**
	 * rotate:
	 *   旋转立方体。
	 *   angleX: 绕X轴旋转angleX角度
	 *   ...
	 */
	this.rotate = function(angleX, angleY, angleZ)
	{
		for(var i=0; i<8; i++)
			P[i].rotate(RAD*angleX, RAD*angleY, RAD*angleZ);
		draw();
	};
	/**
	 * setLight:
	 *   设置是否开启光亮
	 */
	this.setLight = function(v)
	{
		bLight = v;
		if(!v)
			for(var i=0; i<6; i++)
				setLight(i, 0);
	};
	Init();
};
Cube.FACE_FRONT = 0;
Cube.FACE_RIGHT = 1;
Cube.FACE_BACK = 2;
Cube.FACE_LEFT = 3;
Cube.FACE_TOP = 4;
Cube.FACE_BOTTOM = 5;
})()	//End Module
</script>
<script>
/**
 * Update: 2011-9-2
 */
var MyFace =
[
	{
		id: Cube.FACE_FRONT,
		logo: "http://www.google.com.hk/intl/zh-CN/images/logo_cn.png",
		url: "http://www.google.com/search?q=%s",
		btn: "Search Web"
	},
	{
		id: Cube.FACE_BACK,
		logo: "http://www.google.com.hk/intl/zh-CN_cn/images/logos/images_logo_lg.gif",
		url: "http://www.google.com/images?q=%s",
		btn: "Search Image"
	},
	{
		id: Cube.FACE_LEFT,
		logo: "http://www.google.com/intl/zh-CN_cn/images/logos/music_logo.gif",
		url: "http://www.google.cn/music/search?q=%s",
		btn: "Search Music"
	},
	{
		id: Cube.FACE_BOTTOM,
		logo: "http://www.google.com/intl/zh-CN_cn/images/logos/maps_logo.gif",
		url: "http://maps.google.com/maps?q=%s",
		btn: "Search Maps"
	},
	{
		id: Cube.FACE_RIGHT,
		logo: "http://www.google.com/intl/zh-CN_cn/images/logos/news_logo.gif",
		url: "http://news.google.com/news/search?q=%s",
		btn: "Search News"
	},
	{
		id: Cube.FACE_TOP,
		logo: "http://www.google.com.hk/intl/zh-CN_cn/images/logos/video_logo_lg.gif",
		url: "http://video.google.com/search?q=%s",
		btn: "Search Video"
	}
];
</script>
<script>
var oCube;
var cx, cy;
var dx, dy;
var r = 80;
var ar = 0;
document.onmousemove = function(e)
{
	e = e || event
	dx = e.clientX - cx;
	dy = e.clientY - cy;
};
window.onresize = function()
{
	var de = document.documentElement;
	cx = de.clientWidth / 2;
	cy = de.clientHeight / 2;
	oCube.setLocate(cx, cy);
};
document.onclick = function(e)
{
	e = e || event;
	e = e.target || e.srcElement;
	if(e.tagName == "BUTTON")
		DoSearch(e);
}
document.onmouseover = function(e)
{
	e = e || event;
	e = e.target || e.srcElement;
	if(e.tagName == "INPUT")
		e.style.borderColor = "red";
}
document.onmouseout = function(e)
{
	e = e || event;
	e = e.target || e.srcElement;
	if(e.tagName == "INPUT")
		e.style.borderColor = "#666";
}
document.onkeydown = function(e)
{
	e = e || event;
	var dom = e.target || e.srcElement;
	if(dom.tagName == "INPUT" && e.keyCode == 13)
		DoSearch(dom.nextSibling);
}
window.onload = function()
{
	var i, oFace;
	oCube = new Cube();
	for(i=0; i<6; i++)
	{
		oFace = document.createElement("div");
		oFace.className = "face";
		oFace.innerHTML = "<img src='" + MyFace[i].logo + "' /><input type='text' /><button tid=" + i + ">" + MyFace[i].btn + "</button>";
		document.body.appendChild(oFace);
		oCube.setFace(MyFace[i].id, oFace);
	}
	oCube.setRadius(r);
	oCube.setLight(true);
	oCube.rotate(20, 20, 0);
	setInterval(OnTimer, 16);
	onresize();
};
var ver = navigator.userAgent;
var isIE = /IE/.test(ver);
var isFF = /Firefox/.test(ver);
if(isFF)
	document.addEventListener("DOMMouseScroll", handleScroll, false);
else
	document.onmousewheel = handleScroll;
function handleScroll(e)
{
	e = e || event;
	var d = isFF? -e.detail: e.wheelDelta;
	ar += (d<0?-10:10);
	if(ar > 100)
		ar = 100;
	else if(ar < -100)
		ar = -100;
	if(isIE)
	{
		e.returnValue = false;
	}
	else
	{
		e.preventDefault();
		e.stopPropagation();
	}
}
function OnTimer()
{
	var aX = dy / 100;
	var aY = -dx / 100;
	if(aX || aY)
		oCube.rotate(aX, aY);
	if(ar < 0)
		ar++, r--;
	else if(ar > 0)
		ar--, r++;
	else
		return;
	if(r < 80)
		r = 80;
	else if(r > 200)
		r = 200;
	oCube.setRadius(r);
}
function DoSearch(btn)
{
	var word = btn.previousSibling.value;
	var id = btn.getAttribute("tid");
	var url = MyFace[id].url.replace("%s", encodeURI(word));
	window.open(url);
}
</script>
</body>
</html>

AخA
 
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Google Cube</title>
<style>
html
{
    overflow: hidden;
}
.face
{
    width: 100%;
    height: 100%;
    background: #FFF;

CSS代码

复制格式化注释注释颜色清空

放大

CSS代码...​x
 
​

JS代码

复制格式化注释注释清空

放大

JS代码...xxxxxxxxxx
 
​

运行代码

简介

请输入代码名称！

名称

Google Cube，优化过的Google立方体代码

分类

网站常用

描述

Google Cube，优化过的Google立方体代码，以前记得发过的，现在发现了更新版本，于是分享给大家，或许对于你学习JS是想当有好处的，现在用iframe替换了图片。这里取了Google的6个服务页面，贴在立方体上，可以实现搜索功能，也希望大家指...