原生javascript+css3编写的3D魔方动画旋扭特效
一直从事于后端编程工作，工作中也经常接触和使用一些前端技术，但大多数还是用于操作和控制数据与客户端交互工作。随着互联网技术的发展以及硬件性能的不断提升，人们对于交互式体验已变得越来越重视，进而前端技术已经越来越突显出它的重要性，特别是一些炫酷的特效，精美的UI设计，都使人眼前一亮，顿时觉得网站平台都高大上不少，很博人们眼球，给人们以很好的视觉冲击，特别是现在的css3,HTML5技术的更新，使得以更小的代价就可以轻松实现这些效果，故此，顿时膜拜起前端技术，悠然起了兴趣，跃跃欲试，随机利用css3的新增3D特效技术及动画特效功能加原生态javascript写了一个随机打乱旋扭的魔方，在指定的步数后，魔方按记录的动作，逆行旋扭重新归位。随即发布出来与大家分享，也希望前端的大牛能指点一二，不甚感激！
代码如下：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv=\"Content-Type\" content=\"text/html; charset=utf-8\" />
<title></title>
<meta charset=\"utf-8\" />
<script language=\"javascript\" type=\"text/javascript\">
var cache = {};
(function (exports) {
function Cube(opts) {
opts = opts || {};
this.parent = opts.parent; //插入到哪里
this.browserPrefix = opts.browserPrefix;
this.width = opts.width;
this.height = opts.height;
this.cubZ = opts.cubZ;
this.face = opts.face;
this.row = opts.row;
this.column = opts.column;
this.offsetX = this.column * (this.width + opts.marginX); //
this.offsetY = this.row * (this.height + opts.marginY);//
this.offsetZ = this.face * (this.cubZ + opts.marginZ);//
this.positiveZ = this.cubZ / 2;
this.negativeZ = -this.cubZ / 2;
this.cubFaceInfo = opts.cubFaceInfo;
this.dimension = opts.dimension;
this.centerX = (this.dimension * this.width + (this.dimension - 1) * opts.marginX) / 2;
this.centerY = (this.dimension * this.height + (this.dimension - 1) * opts.marginY) / 2;
this.centerZ = (this.dimension * this.cubZ + (this.dimension - 1) * opts.marginZ) / 2;
this.translateX = this.offsetX - this.centerX; //把中心点设为原点
this.translateY = this.offsetY - this.centerY; //
this.translateZ = this.cubZ / 2 + this.offsetZ - this.centerZ; //offsetZ按上面计算应该跟x,y在一个平面上即后面，但实际上由于要形成立方体，在Z轴上已经后退了cubZ/2个距离，故为和上面保持一致在一个面上，这里需要再加回cubZ/2个距离，使默认的xyz原点都在一个平面上即立方体后面左上角三维坐标系，以这个点作为参考点平移和设置旋转原点
this.cubeFace = [];
this.rotateTransfrom = \"\";
this.init();
}
Cube.prototype = {
init: function () {
this.createCubeBox();
this.createFront();
this.createBack();
this.createTop();
this.createBottom();
this.createLeft();
this.createRight();
},
createCubeBox: function () {
this.Box = document.createElement(\'div\');
this.Box.style.width = this.width + \"px\";
this.Box.style.height = this.height + \"px\";
this.Box.style.left = \"50%\";
this.Box.style.top = \"50%\";
this.Box.style.position = \"absolute\";
this.Box.style[this.browserPrefix + \"TransformStyle\"] = \"preserve-3d\";
this.Box.style[this.browserPrefix + \"Perspective\"] = \"0\";
// this.Scene.style[this.browserPrefix + \"backfaceVisibility\"] = \"hidden\";
this.intalTransform = \"translateZ(\" + this.translateZ + \"px) translateX(\" + this.translateX + \"px) translateY(\" + this.translateY + \"px)\";
this.Box.style[this.browserPrefix + \"Transform\"] = this.intalTransform;
this.Box.style[this.browserPrefix + \"TransformOrigin\"] = \"\" + (-this.translateX) + \"px \" + (-this.translateY) + \"px \" + (-this.translateZ) + \"px\";
this.parent.appendChild(this.Box);
this.x = window.getComputedStyle(this.Box).getPropertyValue(\'left\');
this.y = window.getComputedStyle(this.Box).getPropertyValue(\'top\');
this.matrix3d = window.getComputedStyle(this.Box).getPropertyValue(\'transform\');
},
createFace: function () {
var face = document.createElement(\'div\');
face.style.margin = 0;
face.style.position = \"absolute\";
face.style.width = this.width + \"px\";
face.style.height = this.height + \"px\";
return face;
},
createFront: function () {
var face = this.createFace();
face.style[this.browserPrefix + \"Transform\"] = \"translateZ(\" + this.positiveZ + \"px) \"
this.cubeFace.push(face);
this.front = face;
this.Box.appendChild(face);
},
createBack: function () {
var face = this.createFace();
face.style[this.browserPrefix + \"Transform\"] = \"translateZ(\" + this.negativeZ + \"px) \";
this.cubeFace.push(face);
this.back = face;
this.Box.appendChild(face);
},
createTop: function () {
var face = this.createFace();
face.style[this.browserPrefix + \"Transform\"] = \"rotateX(90deg) translateZ(\" + this.positiveZ + \"px) \";
this.cubeFace.push(face);
this.top = face;
this.Box.appendChild(face);
},
createBottom: function () {
var face = this.createFace();
face.style[this.browserPrefix + \"Transform\"] = \"rotateX(90deg) translateZ(\" + this.negativeZ + \"px) \";
this.cubeFace.push(face);
this.bottom = face;
this.Box.appendChild(face);
},
createLeft: function () {
var face = this.createFace();
face.style[this.browserPrefix + \"Transform\"] = \"rotateY(90deg) translateZ(\" + this.negativeZ + \"px) \";
this.cubeFace.push(face);
this.left = face;
this.Box.appendChild(face);
},
createRight: function () {
var face = this.createFace();
face.style[this.browserPrefix + \"Transform\"] = \"rotateY(90deg) translateZ(\" + (this.positiveZ) + \"px) \";
this.cubeFace.push(face);
this.right = face;
this.Box.appendChild(face);
}
}
exports.magicCube = function (opts) {
opts = opts || {};
this.parent = opts.parent || document.getElementsByTagName(\'body\')[0];
this.dimension = opts.dimension || 3; //魔方级数
this.cubWidth = opts.cubWidth || 50; //单个立方体宽度
this.cubHidth = opts.cubHidth || 50; //单个立方体告诉
this.marginLeft = opts.marginLeft || 0;
this.marginTop = opts.marginLeft || 0;
this.marginZ = opts.marginZ || 0;
this.cubZ = opts.cubZ || 50; //单个立方体Z轴距离
this.sceneWidth = opts.sceneWidth; //3d场景宽度
this.sceneHeight = opts.sceneHeight; //3d场景高度
this.Perspective = opts.Perspective || 0; //投影值
this.cubFaceInfo = opts.cubFaceInfo || { front: { backGround: \"rgba(0,255,255,.5)\" }, back: { backGround: \"rgba(153,204,255,.5)\" }, left: { backGround: \"rgba(128,0,128,.5)\" }, right: { backGround: \"rgba(255,0,255,.5)\" }, top: { backGround: \"rgba(255,153,204,.5)\" }, bottom: { backGround: \"rgba(0,204,255,.5)\" }, inner: { backGround: \"rgba(100,100,100,.5)\" } }; //立方体面信息
this.angle = opts.angle || 90;
this.rollbackPoint = opts.rollbackPoint || 10;
this.faceCount = this.dimension * this.dimension; //每面立方体个数
this.count = this.dimension * this.dimension * this.dimension; //立方体总个数
this.cubes = [];
this.browserPrefix = \"\";
this.isRunning = 0;
this.timer = null;
this.rotateFace;
this.moveDirect = true;//正向随机动作还是回归，默认为正向
this.cubeMoveQueue = [];
this.rollMoveStack = [];//动作回归的堆栈
this.init();
};
magicCube.prototype = {
init: function () {
this.start();
},
create3dScene: function () {
this.Scene = document.createElement(\'div\');
//this.Scene.className = \"cube\";
var width = this.sceneWidth || this.clientWidth,
height = this.sceneHeight || this.clientHeight;
this.Scene.style.width = width + \"px\";
this.Scene.style.height = height + \"px\";
this.Scene.style.position = \"relative\";
this.Scene.style[this.browserPrefix + \"TransformStyle\"] = \"preserve-3d\";
this.Scene.style[this.browserPrefix + \"Perspective\"] = this.Perspective + \"px\";
// this.Scene.style[this.browserPrefix + \"backfaceVisibility\"] = \"hidden\";
this.Scene.style[this.browserPrefix + \"Transform\"] = \"rotateX(-30deg) rotateY(30deg) \";
this.parent.appendChild(this.Scene);
},
create: function (face, row, column) {
return new Cube({
parent: this.Scene,
dimension: this.dimension,
width: this.cubWidth,
height: this.cubHidth,
cubZ: this.cubZ,
face: face,
row: row,
column: column,
browserPrefix: this.browserPrefix,
cubFaceInfo: this.cubFaceInfo,
marginX: this.marginLeft,
marginY: this.marginTop,
marginZ: this.marginZ,
dimension: this.dimension
});
},
createMagicCube: function (index) {
var face = 0, row = 0, column = 0;
for (var i = 0; i < this.count; i++) {
this.cubes.push(this.create(face, row, column));
this.cubes[this.cubes.length - 1].index = this.cubes.length - 1;
column++;
if ((i + 1) % this.dimension === 0) {
row++;
column = 0;
}
if ((i + 1) % this.faceCount === 0) {
face++;
row = 0;
}
}
},
drawBackGroundColor: function () {
for (var face in this.cubFaceInfo) {
if (face == \"inner\") {
this.setInnerBKColor(this.cubFaceInfo[face].backGround);
}
else {
var cube = this.getCubesByFace(face);
for (var i = 0, len = cube.length; i < len; i++) {
cube[i][face].style.background = this.cubFaceInfo[face].backGround;
}
}
}
},
setInnerBKColor: function (color) {
for (var i = 0; i < this.count; i++) {
for (var j = 0; j < 6; j++) {
if (this.cubes[i].cubeFace[j].style.background == \"\") {
this.cubes[i].cubeFace[j].style.background = color;
}
}
}
},
getZFace: function (zIndex) {
var zFace = [];
if (zIndex < 1 || zIndex > this.dimension)
return null;
for (var i = (zIndex - 1) * this.faceCount; i < zIndex * this.faceCount; i++) {
zFace.push(this.cubes[i]);
}
return zFace;
},
getXFace: function (xIndex) {
var xFace = [];
if (xIndex < 1 || xIndex > this.dimension)
return null;
for (var i = 0; i < this.count; i++) {
if (i % this.dimension == 0)
xFace.push(this.cubes[i + xIndex - 1]);
}
return xFace;
},
getYFace: function (yIndex) {
var yFace = [];
if (yIndex < 1 || yIndex > this.dimension)
return null;
for (var i = 0; i < this.count; i++) {
if (i % this.faceCount == (yIndex - 1) * this.dimension) {
for (var j = 0; j < this.dimension; j++)
yFace.push(this.cubes[i + j]);
}
}
return yFace;
},
getSideCubes: function (cubes, circleIndex) {
var sides = [], top = [], left = [], bottom = [], right = [];
if (circleIndex < 0 || circleIndex > this.dimension / 2 - 1)
return null;
for (var i = 0, count = this.dimension - circleIndex * 2; i < count; i++) {
top.push(cubes[circleIndex * this.dimension + circleIndex + i]);
left.push(cubes[circleIndex * this.dimension + circleIndex + i * this.dimension]);
bottom.push(cubes[(this.dimension - 1 - circleIndex) * this.dimension + circleIndex + i]);
right.push(cubes[circleIndex * this.dimension + circleIndex + i * this.dimension + (this.dimension - (circleIndex * 2) - 1)]);
}
sides.push(this.orderByDesc(top));
sides.push(left);
sides.push(bottom);
sides.push(this.orderByDesc(right));
return sides;
},
getCubesByFace: function (face) {
switch (face) {
case \"front\": return this.getZFace(this.dimension);
case \"back\": return this.getZFace(1);
case \"left\": return this.getXFace(1);
case \"right\": return this.getXFace(this.dimension);
case \"top\": return this.getYFace(1);
case \"bottom\": return this.getYFace(this.dimension);
}
},
moveMagicCube: function () {
if (this.cubes.length < 1) return;
//var cubes = this.getYFace(2);
//for (var i = 0, len = cubes.length; i < len; i++) {
// cubes[i].Box.className = \"rotate\";
//}
//随机产生3D转动方向
this.isRunning = 0;
var direct = this.random(1, 3), rotateDirect = \"\", getFaceFun;
// direct=3;
switch (direct) {
case 1: rotateDirect = \"rotateX\"; getFaceFun = this.getXFace; break;
case 2: rotateDirect = \"rotateY\"; getFaceFun = this.getYFace; break;
case 3: rotateDirect = \"rotateZ\"; getFaceFun = this.getZFace; break;
}
this.rotateFace = rotateDirect;
this.cubeRotateStatus = [];
for (var i = 1; i <= this.dimension; i++) {
var status = this.random(0, 2);
this.cubeRotateStatus.push(status);
switch (status) {
case 0: break;//不转动
case 1: this.rotateBox(this.angle, rotateDirect, i, getFaceFun.call(this, i)); break;//正向转动90
case 2: this.rotateBox(-this.angle, rotateDirect, i, getFaceFun.call(this, i)); break;//反向转动90
}
}
var flag = false;
for (var i = 0, len = this.cubeRotateStatus.length; i < len; i++) {
if (this.cubeRotateStatus[i]) {
flag = true;
break;
}
}
if (!flag) {//一个都没转的情况 则强制补充一个
var index = this.random(1, this.dimension);
this.rotateBox(this.angle, rotateDirect, index, getFaceFun.call(this, index)); //正向转动90
this.cubeRotateStatus[index - 1] = 1;//全都不转动 默认选出一个 使其正向转动指定度数
}
setTimeout(this.timerFun, 100);
this.rollMoveStack.push({ rotateFace: this.rotateFace, cubeRotateStatus: this.cubeRotateStatus });//记录动作状态
if (this.rollMoveStack.length == this.rollbackPoint)//判断当达到阀值时切换动作方向为回归
this.moveDirect = false;
},
moveRollBackCube: function () {
var record = this.rollMoveStack.pop(), getFaceFun;
this.rotateFace = record.rotateFace;
this.isRunning = 0;
switch (record.rotateFace) {
case \"rotateX\": getFaceFun = this.getXFace; break;
case \"rotateY\": getFaceFun = this.getYFace; break;
case \"rotateZ\": getFaceFun = this.getZFace; break;
}
this.cubeRotateStatus = [];
for (var i = 0, len = record.cubeRotateStatus.length; i < len; i++) {
var dimensionIndex = i+1, status = record.cubeRotateStatus[i];
if (status == 1) {
this.cubeRotateStatus.push(2);//1 变2，2变1
this.rotateBox(-this.angle, record.rotateFace, dimensionIndex, getFaceFun.call(this, dimensionIndex)); //反向转动90
}
else if (status == 2) {
this.cubeRotateStatus.push(1);//1 变2，2变1
this.rotateBox(this.angle, record.rotateFace, dimensionIndex, getFaceFun.call(this, dimensionIndex)); //反向转动90
}
else {
this.cubeRotateStatus.push(0);
}
}
setTimeout(this.timerFun, 100);
if (this.rollMoveStack.length == 0)//判断当达到0时切换动作为正向随机
this.moveDirect = true;
},
intersect: function (source, target) {
var data = [];
for (var i = 0, len = source.length; i < len; i++) {
var index = target.indexOf(source[i]);
if (index >= 0)
data.push(source[i])
}
return data;
},
orderByDesc: function (datas) {
var temp;
for (var i = 0; i < datas.length - 1; i++) {
for (var j = i + 1; j < datas.length; j++) {
if (parseFloat(datas[i].index) < parseFloat(datas[j].index)) {
temp = datas[i];
datas[i] = datas[j];
datas[j] = temp;
}
}
}
return datas;
},
getSideBackGround: function (sideFaces, face) {
var backGrounds = [];
for (var i = 0, len = sideFaces.length; i < len; i++) {
backGrounds.push(sideFaces[i][face].style.background);
}
return backGrounds;
},
setRotateDirectSideBackGround: function (faceCubes, sideFace, offset, status) {
var oldSides = this.getSideCubes(faceCubes, 0), backColor = [];
var offsetNIndex, offsetPIndex;
for (var j = 0; j < 4; j++) {
offsetPIndex = (j - offset + 4) % 4;
offsetNIndex = (j + offset) % 4;
if (this.rotateFace == \"rotateY\") {
if (status == 1)//正向
{
backColor[j] = this.getSideBackGround(oldSides[offsetPIndex], sideFace[offsetPIndex]);
}
else//反向
{
backColor[j] = this.getSideBackGround(oldSides[offsetNIndex], sideFace[offsetNIndex]);
}
}
else {
if (status == 2)//正向
{
backColor[j] = this.getSideBackGround(oldSides[offsetPIndex], sideFace[offsetPIndex]);
}
else//反向
{
backColor[j] = this.getSideBackGround(oldSides[offsetNIndex], sideFace[offsetNIndex]);
}
}
}
for (var j = 0; j < 4; j++) {
for (var k = 0; k < oldSides[j].length; k++) {
oldSides[j][k][sideFace[j]].style.background = backColor[j][k];
}
}
},
setRotateOtherDirectSideBackGround: function (faceCubes, otherFace, offset, status) {
var oldSides = [], backColor = [];
var offsetNIndex, offsetPIndex;
for (var i = 0; i <= parseInt(this.dimension / 2) - 1; i++) {
oldSides = this.getSideCubes(faceCubes, i), backColor = [];
for (var j = 0; j < 4; j++) {
offsetPIndex = (j - offset + 4) % 4;
offsetNIndex = (j + offset) % 4;
if (this.rotateFace == \"rotateY\") {
if (status == 1)//正向
{
backColor[j] = this.getSideBackGround(oldSides[offsetPIndex], otherFace);
}
else//反向
{
backColor[j] = this.getSideBackGround(oldSides[offsetNIndex], otherFace);
}
}
else {
if (status == 2)//正向
{
backColor[j] = this.getSideBackGround(oldSides[offsetPIndex], otherFace);
}
else//反向
{
backColor[j] = this.getSideBackGround(oldSides[offsetNIndex], otherFace);
}
}
}
for (var j = 0; j < 4; j++) {
for (var k = 0; k < oldSides[j].length; k++) {
oldSides[j][k][otherFace].style.background = backColor[j][k];
}
}
}
},
animationEnd: function () {
var offset = this.angle / 90, faceCubes = [], otherFace;
var zSideFace = [\"top\", \"left\", \"bottom\", \"right\"], xSideFace = [\"back\", \"top\", \"front\", \"bottom\"], ySideFace = [\"back\", \"left\", \"front\", \"right\"], sideFace = [];
for (var i = 0, len = this.cubeRotateStatus.length; i < len; i++) {
var status = this.cubeRotateStatus[i];
if (status) {
var dimensionIndex = i + 1;
switch (this.rotateFace) {
case \"rotateX\": faceCubes = this.getXFace(dimensionIndex); sideFace = xSideFace; if (dimensionIndex == 1) otherFace = \"left\"; else if (dimensionIndex == this.dimension) otherFace = \"right\"; break;
case \"rotateY\": faceCubes = this.getYFace(dimensionIndex); sideFace = ySideFace; if (dimensionIndex == 1) otherFace = \"top\"; else if (dimensionIndex == this.dimension) otherFace = \"bottom\"; break;
case \"rotateZ\": faceCubes = this.getZFace(dimensionIndex); sideFace = zSideFace; if (dimensionIndex == 1) otherFace = \"back\"; else if (dimensionIndex == this.dimension) otherFace = \"front\"; break;
}
this.setRotateDirectSideBackGround(faceCubes, sideFace, offset, status);
if (dimensionIndex == 1 || dimensionIndex == this.dimension)
this.setRotateOtherDirectSideBackGround(faceCubes, otherFace, offset, status);
}
}
// console.info(this.rollMoveStack.length + \",\" + this.moveDirect);
if (this.moveDirect)
this.moveMagicCube();
else
this.moveRollBackCube();
// alert(\"运行结束\");
},
bindAnimationEvent: function () {
var loopMove = function () {
cache.magicCube.isRunning--;//由于按组转动，顾要等组成员都完成再进行新的动画
if (cache.magicCube.isRunning == 0)
cache.magicCube.animationEnd();
}
for (var i = 0; i < this.count; i++) {
this.prefixedEvent(this.cubes[i].Box, \"AnimationEnd\", loopMove, true);
}
cache.magicCube = this;//缓存，避免内存泄露
},
rotateBox: function (angle, rotateDirect, faceIndex, cubes) {
if (cubes != null) {
var startStatus = rotateDirect + \"(0deg)\", endStatus = rotateDirect + \"(\" + angle + \"deg)\";
// this.changeAnimationStatus(\"mydhua\", startStatus, endStatus)
for (var i = 0, len = cubes.length; i < len; i++) {
var ruleName = \"roateRule\" + faceIndex + i;
this.isRunning++;//组成员转动统计
//if (cubes[i].rotateTransfrom != \"\")
// startStatus = cubes[i].rotateTransfrom;
cubes[i].rotateTransfrom = endStatus;
if (this.findKeyframesRule(ruleName) == null)
this.createKeyframesRule(ruleName, cubes[i].intalTransform + \" \" + startStatus, cubes[i].intalTransform + \" \" + endStatus);
else
this.changeAnimationStatus(ruleName, cubes[i].intalTransform + \" \" + startStatus, cubes[i].intalTransform + \" \" + endStatus);
cubes[i].Box.style[this.browserPrefix + \"AnimationName\"] = \"none\";
this.cubeMoveQueue.push({ cube: cubes[i], rule: ruleName });
}
}
},
findKeyframesRule: function (rule) {
var ruleName = this.browserPrefix == \"\" ? \"KEYFRAMES_RULE\" : this.browserPrefix.toUpperCase() + \"_KEYFRAMES_RULE\";
var ss = document.styleSheets;
for (var i = 0; i < ss.length; ++i) {
for (var j = 0; j < ss[i].cssRules.length; ++j) {
if (ss[i].cssRules[j].type == window.CSSRule[ruleName] && ss[i].cssRules[j].name == rule) { return ss[i].cssRules[j]; }
}
}
return null;
},
createKeyframesRule: function (rule, startStatus, endStatus) {
var prefix = this.browserPrefix == \"\" ? \"\" : \"-\" + this.browserPrefix + \"-\";
var sheet;
if (document.styleSheets.length < 1)
sheet = this.createSheets();
else
sheet = document.styleSheets[0];
var selectorText = \"@\" + prefix + \"keyframes \" + rule;
var cssText = \"0% { \" + prefix + \"transform: \" + startStatus + \"; } 100% { \" + prefix + \"transform: \" + endStatus + \"; }\"
if (sheet.insertRule) {
sheet.insertRule(selectorText + \"{\" + cssText + \"}\", 0);
} else if (sheet.addRule) {//兼容IE
sheet.addRule(selectorText, cssText, 0);
}
},
removeKeyframeRule: function (keyframes) {
var length = keyframes.cssRules.length;
var keyframeString = [];
for (var i = 0; i < length; i++) {
keyframeString.push(keyframes.cssRules[i].keyText);
}
//移除动画帧规则
for (var i = 0, j = length; i < j; i++) {
if (this.browserPrefix == \"webkit\" || this.browserPrefix == \"Moz\")
keyframes.deleteRule(keyframeString[i]);
else
keyframes.deleteRule(i); //兼容IE
}
},
changeAnimationStatus: function (animationName, startStatus, endStatus) {
var keyframes = this.findKeyframesRule(animationName);
this.removeKeyframeRule(keyframes);
//重新设置帧规则
var prefix = this.browserPrefix == \"\" ? \"\" : \"-\" + this.browserPrefix + \"-\";
keyframes.appendRule(\"0% { \" + prefix + \"transform: \" + startStatus + \"; }\");
keyframes.appendRule(\"100% { \" + prefix + \"transform: \" + endStatus + \"; }\");
},
createSheets: function () {
// 创建 <style> 标签
var style = document.createElement(\"style\");
// 可以添加一个媒体(/媒体查询,media query)属性
// style.setAttribute(\"media\", \"screen\")
// style.setAttribute(\"media\", \"only screen and (max-width : 1024px)\")
// 对WebKit hack :(
style.appendChild(document.createTextNode(\"\"));
// 将 <style> 元素加到页面中
document.head.appendChild(style);
return style.sheet;
},
prefixedEvent: function (element, type, callback, isAdd) {
var pfx = [\"webkit\", \"moz\", \"MS\", \"o\", \"\"];
for (var p = 0; p < pfx.length; p++) {
if (!pfx[p]) type = type.toLowerCase();
if (isAdd)
element.addEventListener(pfx[p] + type, callback, false);
else
element.removeEventListener(pfx[p] + type, callback, false);
}
},
start: function () {
this.css();
this.prefix();
this.create3dScene();
this.createMagicCube();
this.drawBackGroundColor();
this.bindAnimationEvent();//绑定动画播放完成事件
this.moveMagicCube(); //立即开始动画
// this.timer = setInterval(this.timerFun, 100);
},
timerFun: function () {
var _this = cache.magicCube;
if (_this.isRunning >= _this.dimension) {
for (var i = 0, len = _this.cubeMoveQueue.length; i < len; i++) {
var animation = _this.cubeMoveQueue.shift();
animation.cube.Box.style[_this.browserPrefix + \"Animation\"] = animation.rule + \" 2s linear 1\"; // Chrome, Safari 和 Opera 代码
}
}
},
css: function () {
var d = document,
doc = d.documentElement,
body = d.body;
this.clientWidth = doc.clientWidth;
this.clientHeight = doc.clientHeight;
if (d.compatMode != \"CSS1Compat\") {
this.clientWidth = body.clientWidth;
this.clientHeight = body.clientHeight;
}
// console.log(this.width +\'////\'+ this.height)
},
random: function (min, max) {
return (Math.random() * (max - min + 1) + min) >> 0;
},
prefix: function () {
var N = navigator.appName, ua = navigator.userAgent, tem;
var M = ua.match(/(opera|chrome|safari|firefox|msie)\\/?\\s*(\\.?\\d+(\\.\\d+)*)/i);
if (M && (tem = ua.match(/version\\/([\\.\\d]+)/i)) != null) M[2] = tem[1];
M = M ? [M[1], M[2]] : [N, navigator.appVersion, \'-?\'];
M = M[0];
if (M == \"Chrome\") { this.browserPrefix = \"webkit\"; }
if (M == \"Firefox\") { this.browserPrefix = \"Moz\"; }
if (M == \"Safari\") { this.browserPrefix = \"webkit\"; }
if (M == \"MSIE\") { this.browserPrefix = \"ms\"; }
}
};
}(window));
</script>
</head>
<body style=\"background-color:black\">
<script>
var cube = new magicCube({ parent: null, dimension: 3, cubWidth: 100, cubHidth: 100, marginLeft: 10, marginTop: 10, marginZ: 10, cubZ: 100 });
</script>
</body>
</html>
注：在此基础上可以加上鼠标控制事件，可以直接通过鼠标控制器任意方向的旋扭，也可以稍加改进用于炫酷展示图片！后续有时间我将加上这些功能，与大家再次分享！
本文地址：https://www.stayed.cn/item/19130
转载请注明出处。
本站部分内容来源于网络,如侵犯到您的权益,请 联系我
我的博客
人生若只如初见，何事秋风悲画扇。
我的标签
随笔档案
- 2024-02(2)
- 2023-06(1)
- 2023-05(1)
- 2023-04(14)
- 2023-03(3)
- 2023-01(6)
- 2022-12(5)
- 2022-11(5)
- 2022-07(2)
- 2022-06(4)
- 2022-05(3)
- 2022-03(1)
- 2021-12(6)
- 2021-11(1)
- 2021-10(3)
- 2021-09(5)
- 2021-07(5)
- 2021-02(2)
- 2021-01(7)
- 2020-12(18)
- 2020-11(14)
- 2020-10(12)
- 2020-09(10)
- 2020-08(22)
- 2020-07(2)
- 2020-06(1)
- 2020-04(5)
- 2020-03(9)
- 2020-02(7)
- 2020-01(9)
- 2019-12(8)
- 2019-11(10)
- 2019-10(11)
- 2019-09(17)
- 2019-08(16)
- 2019-07(6)
- 2019-06(3)
- 2019-04(1)
- 2019-03(8)
- 2019-02(5)
- 2019-01(1)
- 2018-11(2)
- 2018-10(3)
- 2018-09(1)
- 2018-08(3)
- 2018-07(3)
- 2018-06(7)
- 2018-04(4)
- 2018-03(5)
- 2018-02(4)
- 2018-01(22)
- 2017-12(3)
- 2017-11(5)
- 2017-10(15)
- 2017-09(26)
- 2017-08(1)
- 2017-07(3)