web前端|js教程
javascript,css3,3D魔方动画,魔方旋扭
web前端-js教程
一直从事于后端编程工作，工作中也经常接触和使用一些前端技术，但大多数还是用于操作和控制数据与客户端交互工作。随着互联网技术的发展以及硬件性能的不断提升，人们对于交互式体验已变得越来越重视，进而前端技术已经越来越突显出它的重要性，特别是一些炫酷的特效，精美的UI设计，都使人眼前一亮，顿时觉得网站平台都高大上不少，很博人们眼球，给人们以很好的视觉冲击，特别是现在的css3,HTML5技术的更新，使得以更小的代价就可以轻松实现这些效果，故此，顿时膜拜起前端技术，悠然起了兴趣，跃跃欲试，随机利用css3的新增3D特效技术及动画特效功能加原生态javascript写了一个随机打乱旋扭的魔方，在指定的步数后，魔方按记录的动作，逆行旋扭重新归位。随即发布出来与大家分享，也希望前端的大牛能指点一二，不甚感激！
php漂亮手机网站源码,c 默认vscode打开,ubuntu 安装库,tomcat传递中文乱码,sqlite大数据查询速度,中英翻译器的设计基于爬虫,const php 数组,重庆搜索seo优化公司,phpems模拟考试系统网站,bootstrap 织梦模板lzw
源码上传软件手机版,vscode开发工具安装,ubuntu 光盘 地址,tomcat配置优化详解,数学在爬虫,php简单增删改查,马鞍山seo推广推荐,模板网站有源码么,destoon新闻模板lzw
代码如下：
mysql 源码 调试,ubuntu里安装tim,设置tomcat定时重起,爬虫url变化,php是多进程,邯郸搜索引擎seo推广如何进行lzw
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( op);this.matrix3d = window.getComputedStyle(this.Box).getPropertyValue( ransform); }, 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(ody)[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 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 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 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 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)); //正向转动90this.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 = 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();elsethis.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();elsesheet = 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) {//兼容IEsheet.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 () {// 创建 标签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(""));// 将 元素加到页面中document.head.appendChild(style);return style.sheet; }, prefixedEvent: function (element, type, callback, isAdd) {var pfx = ["webkit", "moz", "MS", "o", ""];for (var p = 0; p = _this.dimension) {for (var i = 0, len = _this.cubeMoveQueue.length; i > 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)); var cube = new magicCube({ parent: null, dimension: 3, cubWidth: 100, cubHidth: 100, marginLeft: 10, marginTop: 10, marginZ: 10, cubZ: 100 });
注：在此基础上可以加上鼠标控制事件，可以直接通过鼠标控制器任意方向的旋扭，也可以稍加改进用于炫酷展示图片！后续有时间我将加上这些功能，与大家再次分享！
