3d图片爆碎效果

这个也是工作需求

没什么好说 直接上代码

;(function($){
var Slider = function(ele,option){
var self = this;
this.ele = ele;
this.flag = false;//回调标志
this._dom ="";//dom结构
this.timer = null;//运动调用定时器
this.setting = {
width:500,
height:600,
Xnum:6,//横向个数
Ynum:6,//竖向个数
houdu:6,//厚度
xR:120,//x轴方向
yR:120,//y轴方向
ZR:120,//z轴方向
image:"",//霸屏图片
timeMove:4000,//2秒调用一次
backtime:1000,//停留几秒后调用回调
movingstatus:"ease-in",//运动状态
movingtime:"1s",//过渡时间
}


$.extend(true,this.setting,option||{});
//获取原始图片的对象
this.i_img = new Image();
this.i_img.src = this.setting.image;
self._init()


}
Slider.prototype = {
//初始化包裹层
_init_dom:function(){
var self = this;
var _wrap = "<div class='wrap'></div>";
$(".rect").wrap(_wrap);
$(".wrap").css({
width:self.setting.width+"px",
height:self.setting.height+"px",
position:"absolute",
// marginLeft:-self.setting.width/2+'px',
// marginTop:-self.setting.height/2+'px',
// left: "50%",
// top: "50%",
overflow:"hidden",
})
},
//处理图片尺寸位置 适应问题
imagesize:function(){
var self = this;
var i_image_W = self.i_img.width;
var i_image_H = self.i_img.height;
console.log(self.i_img.width)


var Wrate = i_image_W / i_image_H;//宽高比例


//判断当前原始图片属于
if(Wrate>=1.2){
// 横图
self.ele.find("img").css({
width:"100%",
position:"absolute",
top:"50%",
transform:"translate(0,-50%)"
})
}else if(Wrate<1){
// 竖图
self.ele.find("img").css({
height:"100%",
position:"absolute",
left:"50%",
transform:"translate(-50%,0)"
})
console.log("竖图")
}else{
// 类正方形
//alert("这是父层宽高:"+$(".wrap").width()+","+$(".wrap").height())
//对于正方形图片 适应不同的父元素尺寸
if($(".wrap").width()>$(".wrap").height()){
self.ele.find("img").css({
height:"100%",
position:"absolute",
top:"50%",
transform:"translate(0,-50%)"
})
}else{
self.ele.find("img").css({
width:"100%",
position:"absolute",
top:"50%",
transform:"translate(0,-50%)"
})
}


}
//这是img标签的实际尺寸
var imageW = self.ele.find("img").width();
var imageH = self.ele.find("img").height();
self.i_img.width = imageW;
self.i_img.height = imageH;
console.log(imageH)
//设置外层元素居中 尺寸跟随里面img标签尺寸自动调整
self.ele.css({
width:imageW,
height:imageH,
position:"absolute",
left:"50%",
top:"50%",
marginLeft:-imageW/2,
marginTop:-imageH/2,
perspective:"1000000px"


});
},
littleSquery:function(){
var self = this;
var parentW = self.ele.width();
var parentH = self.ele.height();
var liittleW = parentW/self.setting.Xnum;
var liittleH = parentH/self.setting.Ynum;
var littleBoxLeft = -1*liittleW;
var littleBoxTop = -1*liittleH;
for(var i=0;i<self.setting.Ynum;i++){//
littleBoxTop += liittleH
for(var j=0;j<self.setting.Xnum;j++){
littleBoxLeft += liittleW;
self._dom = '<div class="fangkuaiwrap" style="position:absolute;width:'+liittleW+'px;height:'+liittleH+'px;left:'+littleBoxLeft+'px;top:'+littleBoxTop+'px;background-color:#ddd;transform-style: preserve-3d;transform-origin:center center;">'+
'<div class="page" id="top" style="transform:rotateX(90deg);top:'+(-liittleW/self.setting.houdu)+'px;transform-origin: bottom;width:100%;height:'+liittleW/self.setting.houdu+'px;"></div>'+
'<div class="page" id="bottom" style="transform:rotateX(-90deg);bottom:'+(-liittleW/self.setting.houdu)+'px;transform-origin:top;width:100%;height:'+liittleW/self.setting.houdu+'px;"></div>'+
'<div class="page" id="left" style="transform:rotateY(-90deg);left:'+(-liittleW/self.setting.houdu)+'px;transform-origin:right;height:100%;width:'+liittleW/self.setting.houdu+'px"></div>'+
'<div class="page" id="right" style="transform:rotateY(90deg);right:'+(-liittleW/self.setting.houdu)+'px;transform-origin:left;height:100%;width:'+liittleW/self.setting.houdu+'px"></div>'+
'<div class="page" id="font" style="transform:rotateY(0deg) translateZ(0px);background-position:'+(littleBoxLeft)*-1+'px '+(littleBoxTop)*-1+'px;width:100%;height:100%"></div>'+
'<div class="page" id="back" style="transform:rotateY(180deg) translateZ('+(liittleW)/self.setting.houdu+'px);width:100%;height:100%"></div>'+
'</div>'
self.ele.append(self._dom);
}
littleBoxLeft =liittleW*(-1)
}
self.setStyle()
},
setStyle:function(){
var self = this;
$(".fangkuaiwrap").each(function(i,n){
$(n).css({
transitionTimingFunction:self.setting.movingstatus,


})
$(n).find(".page").each(function(index,item){
$(this).css({
position:"absolute",
backgroundColor:"rgba(255,255,255,0.8)",
overflow:"hidden",
backfaceVisibility:"hidden",


})
})
$(n).find("#font").css({
backgroundRepeat:"no-repeat",
backgroundImage:"url("+self.setting.image+")",
backgroundSize:""+self.i_img.width+"px "+self.i_img.height+"px"
})
})
},
useRot:function(){
var self = this;
self.timer = setInterval(self.rotatelittle.bind(this),self.setting.timeMove)
},
GetRandomAngle:function(Min,Max){
var Range = Max - Min;
var Rand = Math.random();
return(Min + Math.round(Rand * Range));
},
GetMoveNum:function(Min,Max){
var Range = Max - Min;
var Rand = Math.random();
return(Min + Math.floor(Rand * Range));
},
//总调用
rotatelittle:function(){
var self = this;
var num = self.GetMoveNum(0,4);
console.log(num)
switch(num){
case 0:
self.move1();
break;
case 1:
self.move2();
break;
case 2:
self.move3();
break;
case 3:
self.move4();
break;
}
// self.move4()
if(self.flag){
clearInterval(self.timer);
console.log("定时器清除")
self.call_back()
self.flag = false;
} else {
console.log("定时器没清除")


self.flag = true;
}
},
//运动方式1
move1:function(){
var self = this
$(".fangkuaiwrap").each(function(i,n){
var angle1 = self.GetRandomAngle(-260,290);
var angle2 = self.GetRandomAngle(360,350);
var angle3 = self.GetRandomAngle(-160,160);
var scalenum = self.GetRandomAngle(0.2,0.4);
$(n).css({
transitionDelay:i/(self.setting.Xnum*self.setting.Ynum)+"s",
transition:"2.5s ease-out",
transform:" rotateX("+angle1+"deg) rotateZ("+angle2+"deg) rotateY("+angle3+"deg) translate3d("+angle1+"px,"+angle2+"px,0px) scale("+scalenum+")",
})
})
},
//运动方式2
move2:function(){
var self = this;
$(".fangkuaiwrap").each(function(i,n){
var angle1 = self.GetRandomAngle(-360,100);
var angle2 = self.GetRandomAngle(-360,self.setting.yR);
var angle3 = self.GetRandomAngle(-360,self.setting.ZR);
var scalenum = self.GetRandomAngle(0.5,1.1);
$(n).css({
transitionDelay:i/(self.setting.Xnum*self.setting.Ynum)+"s",
transition:"2s",//破裂过渡时间
transitionTimingFunction:"cubic-bezier(1,-0.68,.36,2)",
transform:" rotateX("+angle1+"deg) rotateZ("+angle2+"deg) rotateY("+angle3+"deg) translate3d("+angle1+"px,"+angle2+"px,0px)",
})
})


},
//运动方式3
move3:function(){
var self = this;
$(".fangkuaiwrap").each(function(i,n){
var angle1 = self.GetRandomAngle(300,310);
var angle2 = self.GetRandomAngle(-310,320);
var angle3= self.GetRandomAngle(500,600);
var scalenum = self.GetRandomAngle(0.5,1.1);
$(n).css({
transition:"1.5s",
transform:"rotateX("+angle1+"deg) rotateY("+angle2+"deg) rotateZ("+angle3+"deg) scale("+scalenum+")",
transitionDelay:i/(self.setting.Xnum*self.setting.Ynum)+"s",
})
})
},
//运动方式4
move4:function(){
var self = this;
$(".fangkuaiwrap").each(function(i,n){
var angle1 = self.GetRandomAngle(90,-60);
var angle2 = self.GetRandomAngle(90,-60);
var angle3= self.GetRandomAngle(-50,60);
var scalenum = self.GetRandomAngle(0.5,1.1);
$(n).css({
transitionDelay:i/((self.setting.Xnum*self.setting.Ynum)/5)+"s",
transform:"rotateX("+angle1+"deg) rotateY("+angle2+"deg)",
top:"200px",
transition:"1s"
})


})
},
//回归调用
call_back:function(){
var self = this;
setTimeout(self.backmove1.bind(this),100)
},
//回归运动方式1
backmove1:function(){
var self = this;
var H = self.ele.height()/self.setting.Ynum;
var top = - H;
$(".fangkuaiwrap").each(function(i,n){
if(i%self.setting.Xnum==0){
top += H
}
$(n).css({
transition:"0.2s",
transform:"rotateY(0deg) rotateX(0deg) rotateZ(0deg)",
top:top+"px"
})
})
top = -H;
setTimeout(self.useRot.bind(self),2000)
},


}
Slider.prototype._init = function(){
var self = this;
self._init_dom();
self.imagesize();
self.littleSquery();
self.useRot();
}
$.fn.slider = function(option){
return new Slider(this,option)
}
})(jQuery)