/**

* @Author: zql

* @Version:1.0

* @Date:2019-05-29

* Licensed under the MIT license

*/

"use strict";//严格模式

;(function($){

$.fn.cube = function(options,callback){

//默认设置

var _defaults = {

size:200, //魔方大小

fontSize:30,//字体大小

fontColor:"#fff",//字体颜色

outBackgroundColor:"#333",//外壳背景色

inBackgroundColor:"#999",//内壳背景色

front:"前面",//前外壳内文字

back:"后面",//后外壳内文字

left:"左面",//左外壳内文字

right:"右面",//右外壳内文字

top:"上面",//上外壳内文字

bottom:"下面"//下外壳内文字

};

if(options){

for(var key in _defaults){

if(options[key]){

_defaults[key]=options[key];

}

}

}

var _isRun = true;//魔方是否旋转

var _cube = $('

'

+'

'+_defaults.front+''

+'

'+_defaults.back+''

+'

'+_defaults.left+''

+'

'+_defaults.right+''

+'

'+_defaults.top+''

+'

'+_defaults.bottom+''

+''

+''

+''

+''

+''

+''

+''

);

this.html(_cube);

var _cubeStyle = {

"width":""+_defaults.size+"px",

"height":""+_defaults.size+"px",

"position":"relative",

"color":_defaults.fontColor,

"font-size":""+_defaults.fontSize+"px",

"font-weight":"bold",

"text-align":"center",

"line-height":""+_defaults.size+"px",

"transform-style":"preserve-3d", //默认flat 2D，要设置成3D

};

_cube.css(_cubeStyle);

_cube.find('div').each(function(){

var divStyle = {

"width":"100%",

"height":"100%",

"border":"1px solid #fff",

"position":"absolute",

"cursor":"pointer",

"background-color":_defaults.outBackgroundColor,

"opacity":".6",

"transition":"transform 0.4s ease-in"//缓慢位移

};

$(this).css(divStyle);

//外壳的点击事件

$(this).click(function(){

var classStr = $(this).attr("class");

var flag = classStr.replace("zql-out-","");

callback(flag);

});

});

_cube.find('span').each(function(){

var spanStyle = {

"display":"block",

"width":""+_defaults.size/2+"px",

"height":""+_defaults.size/2+"px",

"border":"1px solid black",

"background-color":_defaults.inBackgroundColor,

"position":"absolute",

"top":""+_defaults.size/4+"px",

"left":""+_defaults.size/4+"px"

};

$(this).css(spanStyle);

});

_cube.find('.zql-out-front').css({transform:'translateZ('+_defaults.size/2+'px)'});

_cube.find('.zql-out-back').css({transform:'translateZ(-'+_defaults.size/2+'px) rotateY(180deg)'});

_cube.find('.zql-out-left').css({transform:'translateX(-'+_defaults.size/2+'px) rotateY(-90deg)'});

_cube.find('.zql-out-right').css({transform:'translateX('+_defaults.size/2+'px) rotateY(90deg)'});

_cube.find('.zql-out-top').css({transform:'translateY(-'+_defaults.size/2+'px) rotateX(90deg)'});

_cube.find('.zql-out-bottom').css({transform:'translateY('+_defaults.size/2+'px) rotateX(-90deg)'});

_cube.find('.zql-in-front').css({transform:'translateZ('+_defaults.size/4+'px)'});

_cube.find('.zql-in-back').css({transform:'translateZ(-'+_defaults.size/4+'px) rotateY(180deg)'});

_cube.find('.zql-in-left').css({transform:'translateX(-'+_defaults.size/4+'px) rotateY(-90deg)'});

_cube.find('.zql-in-right').css({transform:'translateX('+_defaults.size/4+'px) rotateY(90deg)'});

_cube.find('.zql-in-top').css({transform:'translateY(-'+_defaults.size/4+'px) rotateX(90deg)'});

_cube.find('.zql-in-bottom').css({transform:'translateY('+_defaults.size/4+'px) rotateX(-90deg)'});

//鼠标经过时

this.mouseover(stop);

//鼠标离开时

this.mouseout(restart);

//鼠标点击时

this.click(restart);

//重启动画事件

function restart(){

//如果在旋转中就不执行重启动画事件

if(_isRun){

return;

}

_cube.find('.zql-out-front').css({transform:'translateZ('+_defaults.size/2+'px)'});

_cube.find('.zql-out-back').css({transform:'translateZ(-'+_defaults.size/2+'px) rotateY(180deg)'});

_cube.find('.zql-out-left').css({transform:'translateX(-'+_defaults.size/2+'px) rotateY(-90deg)'});

_cube.find('.zql-out-right').css({transform:'translateX('+_defaults.size/2+'px) rotateY(90deg)'});

_cube.find('.zql-out-top').css({transform:'translateY(-'+_defaults.size/2+'px) rotateX(90deg)'});

_cube.find('.zql-out-bottom').css({transform:'translateY('+_defaults.size/2+'px) rotateX(-90deg)'});

_cycle = setInterval(rotating,100);

_isRun = true;//设置状态为开启状态

}

//暂停动画事件

function stop(){

//如果不在旋转中就不执行暂停

if(!_isRun){

return;

}

_cube.find('.zql-out-front').css({transform:'translateZ('+_defaults.size+'px)'});

_cube.find('.zql-out-back').css({transform:'translateZ(-'+_defaults.size+'px) rotateY(180deg)'});

_cube.find('.zql-out-left').css({transform:'translateX(-'+_defaults.size+'px) rotateY(-90deg)'});

_cube.find('.zql-out-right').css({transform:'translateX('+_defaults.size+'px) rotateY(90deg)'});

_cube.find('.zql-out-top').css({transform:'translateY(-'+_defaults.size+'px) rotateX(90deg)'});

_cube.find('.zql-out-bottom').css({transform:'translateY('+_defaults.size+'px) rotateX(-90deg)'});

clearInterval(_cycle);

_isRun = false;//设置为不在旋转状态

}

var _deg = 0;

//旋转动画方法

function rotating(){

_cube.css({"transform":"rotateX("+_deg+"deg) rotateY("+_deg+"deg)"});

_deg += 2;//旋转度数

if(_deg==360){

_deg = 0;

}

}

var _cycle = setInterval(rotating,100);

};

})(jQuery);