超厉害的CSS3图片破碎爆炸效果！

最新推荐文章于 2024-04-25 16:43:08 发布

weixin_34402408

最新推荐文章于 2024-04-25 16:43:08 发布

阅读量2.5k

点赞数

文章标签：前端 json java ViewUI

Java代码

var fx = {
buffer : function(obj, cur, target, fnDo, fnEnd, fs){
if(!fs)fs=6;
var now={};
var x=0;
var v=0;
if(!obj.__last_timer)obj.__last_timer=0;
var t=new Date().getTime();
if(t-obj.__last_timer>20)
{
fnMove();
obj.__last_timer=t;
}
clearInterval(obj.timer);
obj.timer=setInterval(fnMove, 20);
function fnMove(){
v=Math.ceil((100-x)/fs);
x+=v;
for(var i in cur)
{
now[i]=(target[i]-cur[i])*x/100+cur[i];
}
if(fnDo)fnDo.call(obj, now);
if(Math.abs(v)<1 && Math.abs(100-x)<1)
{
clearInterval(obj.timer);
if(fnEnd)fnEnd.call(obj, target);
}
}
},
flex : function(obj, cur, target, fnDo, fnEnd, fs, ms){
var MAX_SPEED=16;
if(!fs)fs=6;
if(!ms)ms=0.75;
var now={};
var x=0; //0-100
if(!obj.__flex_v)obj.__flex_v=0;
if(!obj.__last_timer)obj.__last_timer=0;
var t=new Date().getTime();
if(t-obj.__last_timer>20)
{
fnMove();
obj.__last_timer=t;
}
clearInterval(obj.timer);
obj.timer=setInterval(fnMove, 20);
function fnMove(){
obj.__flex_v+=(100-x)/fs;
obj.__flex_v*=ms;
if(Math.abs(obj.__flex_v)>MAX_SPEED)obj.__flex_v=obj.__flex_v>0?MAX_SPEED:-MAX_SPEED;
x+=obj.__flex_v;
for(var i in cur)
{
now[i]=(target[i]-cur[i])*x/100+cur[i];
}
if(fnDo)fnDo.call(obj, now);
if(Math.abs(obj.__flex_v)<1 && Math.abs(100-x)<1)
{
clearInterval(obj.timer);
if(fnEnd)fnEnd.call(obj, target);
obj.__flex_v=0;
}
}
},
linear : function (obj, cur, target, fnDo, fnEnd, fs){
if(!fs)fs=50;
var now={};
var x=0;
var v=0;
if(!obj.__last_timer)obj.__last_timer=0;
var t=new Date().getTime();
if(t-obj.__last_timer>20)
{
fnMove();
obj.__last_timer=t;
}
clearInterval(obj.timer);
obj.timer=setInterval(fnMove, 20);
v=100/fs;
function fnMove(){
x+=v;
for(var i in cur)
{
now[i]=(target[i]-cur[i])*x/100+cur[i];
}
if(fnDo)fnDo.call(obj, now);
if(Math.abs(100-x)<1)
{
clearInterval(obj.timer);
if(fnEnd)fnEnd.call(obj, target);
}
}
},
stop:function (obj){
clearInterval(obj.timer);
},
move3 : function(obj, json, fnEnd, fTime, sType){
var addEnd=fx.addEnd;
fTime||(fTime=1);
sType||(sType='ease');
setTimeout(function (){
Utils.setStyle3(obj, 'transition', sprintf('%1s all %2', fTime, sType));
addEnd(obj, function (){
Utils.setStyle3(obj, 'transition', 'none');
if(fnEnd)fnEnd.apply(obj, arguments);
}, json);
setTimeout(function (){
if(typeof json=='function')
json.call(obj);
else
Utils.setStyle(obj, json);
}, 0);
}, 0);
}
};
//监听css3运动终止
(function (){
var aListener=[]; //{obj, fn, arg}
if(!Modernizr.csstransitions)return;
if(window.navigator.userAgent.toLowerCase().search('webkit')!=-1)
{
document.addEventListener('webkitTransitionEnd', endListrner, false);
}
else
{
document.addEventListener('transitionend', endListrner, false);
}
function endListrner(ev)
{
var oEvObj=ev.srcElement||ev.target;
//alert(aListener.length);
for(var i=0;i<aListener.length;i++)
{
if(oEvObj==aListener[i].obj)
{
aListener[i].fn.call(aListener[i].obj, aListener[i].arg);
aListener.remove(aListener[i--]);
}
}
}
fx.addEnd=function (obj, fn, arg)
{
if(!obj || !fn)return;
aListener.push({obj: obj, fn: fn, arg: arg});
}
})();
$(function(){
var now=0;
var ready=true;
var W=700;
var H=400;
var $img = $("#img");
var oDiv = $img.get(0);
var next =function(){
return (now+1)%3;
}
//爆炸
$("#btn_explode").on("click",function(){
if(!ready)return;
ready=false;
var R=4;
var C=7;
var cw=W/2;
var ch=H/2;
oDiv.innerHTML='';
oDiv.style.background='url(images/'+(next()+1)+'.jpg) center no-repeat';
var aData=[];
var wait=R*C;
for(var i=0;i<R;i++){
for(var j=0,k=0;j<C;j++,k++)
{
aData[i]={left: W*j/C, top: H*i/R};
var oNewDiv=$('<div>');
oNewDiv.css({
position: 'absolute',
width:Math.ceil(W/C)+'px',
height: Math.ceil(H/R)+'px',
background: 'url(images/'+(now+1)+'.jpg) '+-aData[i].left+'px '+-aData[i].top+'px no-repeat',
left: aData[i].left+'px',
top: aData[i].top+'px'
});
oDiv.appendChild(oNewDiv[0]);
var l=((aData[i].left+W/(2*C))-cw)*Utils.rnd(2,3)+cw-W/(2*C);
var t=((aData[i].top+H/(2*R))-ch)*Utils.rnd(2,3)+ch-H/(2*R);
setTimeout((function (oNewDiv,l,t){
return function ()
{
fx.buffer(
oNewDiv,
{ left: oNewDiv.offsetLeft,
top: oNewDiv.offsetTop ,
opacity: 100,
x:0,
y:0,
z:0,
scale:1,
a:0
},
{ left: l,
top: t,
opacity: 0,
x:Utils.rnd(-180, 180),
y:Utils.rnd(-180, 180),
z:Utils.rnd(-180, 180),
scale:Utils.rnd(1.5, 3),
a:1
},
function (now){
this.style.left=now.left+'px';
this.style.top=now.top+'px';
this.style.opacity=now.opacity/100;
Utils.setStyle3(oNewDiv, 'transform', 'perspective(500px) rotateX('+now.x+'deg) rotateY('+now.y+'deg) rotateZ('+now.z+'deg) scale('+now.scale+')');
}, function (){
setTimeout(function (){
oDiv.removeChild(oNewDiv);
}, 200);
if(--wait==0)
{
ready=true;
now=next();
}
}, 10
);
};
})(oNewDiv[0],l,t), Utils.rnd(0, 200));
}
}
});
//翻转
$("#btn_tile").on("click",function(){
if(!ready)return;
ready=false;
var R=3;
var C=6;
var wait=R*C;
var dw=Math.ceil(W/C);
var dh=Math.ceil(H/R);
oDiv.style.background='none';
oDiv.innerHTML='';
for(var i=0;i<C;i++)
{
for(var j=0;j<R;j++)
{
var oNewDiv=document.createElement('div');
var t=Math.ceil(H*j/R);
var l=Math.ceil(W*i/C);
Utils.setStyle(oNewDiv, {
position: 'absolute', background: 'url(images/'+(now+1)+'.jpg) '+-l+'px '+-t+'px no-repeat',
left: l+'px', top: t+'px', width: dw+'px', height: dh+'px'
});
(function (oNewDiv, l, t){
oNewDiv.ch=false;
setTimeout(function (){
fx.linear(oNewDiv, {y:0}, {y:180}, function (now){
if(now.y>90 && !oNewDiv.ch)
{
oNewDiv.ch=true;
oNewDiv.style.background='url(images/'+(next()+1)+'.jpg) '+-l+'px '+-t+'px no-repeat';
}
if(now.y>90)
{
Utils.setStyle3(oNewDiv, 'transform', 'perspective(500px) rotateY('+now.y+'deg) scale(-1,1)');
}
else
{
Utils.setStyle3(oNewDiv, 'transform', 'perspective(500px) rotateY('+now.y+'deg)');
}
}, function (){
if((--wait)==0)
{
ready=true;
now=next();
}
}, 22);
}, /*(i+j*R)*120*/(i+j)*200);
})(oNewDiv, l, t);
oDiv.appendChild(oNewDiv);
}
}
});
//扭曲
$("#btn_bars").on("click",function(){
if(!ready)return;
ready=false;
var C=7;
var wait=C;
var dw=Math.ceil(W/C);
oDiv.style.background='none';
oDiv.innerHTML='';
for(var i=0;i<C;i++)
{
var oNewDiv=document.createElement('div');
Utils.setStyle(oNewDiv, {
width: dw+'px', height: '100%', position: 'absolute', left: W*i/C+'px', top: 0
});
Utils.setStyle3(oNewDiv, 'transformStyle', 'preserve-3d');
Utils.setStyle3(oNewDiv, 'transform', 'perspective(1000px) rotateX(0deg)');
//setStyle3(oNewDiv, 'transition', '0.5s all linear');
(function (oNewDiv,i){
oNewDiv.style.zIndex=C/2-Math.abs(i-C/2);
setTimeout(function (){
fx.buffer(oNewDiv, {a:0, x:0}, {a:100, x:-90}, function (now){
Utils.setStyle3(oNewDiv, 'transform', 'perspective(1000px) rotateY('+((3*(i-C/2))*(50-Math.abs(now.a-50))/50)+'deg) rotateX('+now.x+'deg)');
}, function (){
if(--wait==0)
{
ready=true;
}
now=next();
}, 8);
//setStyle3(oNewDiv, 'transform', 'perspective(1000px) rotateY('+3*(i-C/2)+'deg) rotateX(-45deg)');
}, (i+1)*130);
})(oNewDiv,i);
oNewDiv.innerHTML='<div></div><div></div><div></div><div></div>';
var oNext=oNewDiv.getElementsByTagName('div')[0];
var oNow=oNewDiv.getElementsByTagName('div')[1];
var oBack=oNewDiv.getElementsByTagName('div')[2];
var oBack2=oNewDiv.getElementsByTagName('div')[3];
Utils.setStyle([oNext, oNow, oBack, oBack2], {width: '100%', height: '100%', position: 'absolute', left: 0, top: 0});
Utils.setStyle(oNext, {
background: 'url(images/'+(next()+1)+'.jpg) '+-W*i/C+'px 0px no-repeat'
});
Utils.setStyle3(oNext, 'transform', 'scale3d(0.836,0.836,0.836) rotateX(90deg) translateZ('+H/2+'px)');
Utils.setStyle(oNow, {
background: 'url(images/'+(now+1)+'.jpg) '+-W*i/C+'px 0px no-repeat'
});
Utils.setStyle3(oNow, 'transform', 'scale3d(0.834,0.834,0.834) rotateX(0deg) translateZ('+H/2+'px)');
Utils.setStyle(oBack, {
background: '#666'
});
Utils.setStyle3(oBack, 'transform', 'scale3d(0.834,0.834,0.834) rotateX(0deg) translateZ(-'+H/2+'px)');
Utils.setStyle(oBack2, {
background: '#666'
});
Utils.setStyle3(oBack2, 'transform', 'scale3d(0.834,0.834,0.834) rotateX(90deg) translateZ(-'+H/2+'px)');
oDiv.appendChild(oNewDiv);
}
});
//立方体
$("#btn_cube").on("click",function(){
if(!ready)return;
ready=false;
oDiv.innerHTML='';
oDiv.style.background='none';
Utils.setStyle3(oDiv, 'transformStyle', 'preserve-3d');
Utils.setStyle3(oDiv, 'transform', 'perspective(1000px) rotateY(0deg)');
var oNow=document.createElement('div');
var oNext=document.createElement('div');
Utils.setStyle([oNow, oNext], {
position: 'absolute',
width: '100%',
height: '100%',
left: 0,
top: 0
});
Utils.setStyle3(oNow, 'transform', 'scale3d(0.741,0.741,0.741) rotate3d(0,1,0,0deg) translate3d(0,0,'+W/2+'px)');
Utils.setStyle3(oNext, 'transform', 'scale3d(0.741,0.741,0.741) rotate3d(0,1,0,90deg) translate3d(0,0,'+W/2+'px)');
oDiv.appendChild(oNext);
oDiv.appendChild(oNow);
oNow.style.background='url(images/'+(now+1)+'.jpg) center no-repeat';
oNext.style.background='url(images/'+(next()+1)+'.jpg) center no-repeat';
//return;
setTimeout(function (){
//setStyle3(oDiv, 'transition', '1s all ease-in-out');
fx.flex(oDiv, {y:0}, {y:-90}, function (now){
Utils.setStyle3(oDiv, 'transform', 'perspective(1000px) rotateY('+now.y+'deg)');
}, function (){
Utils.setStyle3(oDiv, 'transition', 'none');
Utils.setStyle3(oDiv, 'transformStyle', 'flat');
Utils.setStyle3(oDiv, 'transform', 'none');
oDiv.innerHTML='';
oDiv.style.background='url(images/'+(next()+1)+'.jpg) center no-repeat';
now=next();
ready=true;
}, 10, 0.6);
},0);
});
//翻页
$("#btn_turn").on("click",function(){
if(!ready)return;
ready=false;
oDiv.innerHTML='';
oDiv.style.background='url(images/'+(next()+1)+'.jpg) center no-repeat';
var oDivPage=document.createElement('div');
Utils.setStyle(oDivPage, {
position: 'absolute', background: 'url(images/'+(now+1)+'.jpg) right no-repeat', zIndex: 3,
left: '50%', top: 0, width: '50%', height: '100%', overflow: 'hidden'
});
Utils.setStyle3(oDivPage, 'transform', 'perspective(1000px) rotateY(0deg)');
Utils.setStyle3(oDivPage, 'transformOrigin', 'left');
oDiv.appendChild(oDivPage);
var oDivOld=document.createElement('div');
Utils.setStyle(oDivOld, {
position: 'absolute', left: 0, top: 0, width: '50%', height: '100%', zIndex:2,
background: 'url(images/'+(now+1)+'.jpg) left no-repeat'
});
oDiv.appendChild(oDivOld);
var oDivShadow=document.createElement('div');
Utils.setStyle(oDivShadow, {
position: 'absolute', right: 0, top: 0, width: '50%', height: '100%', zIndex:2,
background: 'rgba(0,0,0,1)'
});
oDiv.appendChild(oDivShadow);
oDivPage.ch=false;
fx.buffer(oDivPage, {y:0, opacity: 1}, {y:-180, opacity: 0}, function (now){
if(now.y<-90 && !oDivPage.ch)
{
oDivPage.ch=true;
oDivPage.innerHTML='<img />';
var oImg=oDivPage.getElementsByTagName('img')[0];
oImg.src='images//'+(next()+1)+'.jpg';
Utils.setStyle3(oImg, 'transform', 'scaleX(-1)');
Utils.setStyle(oImg, {
position: 'absolute', right: 0, top: 0, width: '200%', height: '100%'
});
//setStyle3(oDivPage, 'transform', 'perspective(1000px) scale(-1,1) rotateY(-90deg)');
Utils.setStyle3(oDivPage, 'transformOrigin', 'left');
}
if(now.y<-90)
{
Utils.setStyle3(oDivPage, 'transform', 'perspective(1000px) scale(-1,1) rotateY('+(180-now.y)+'deg)');
}
else
{
Utils.setStyle3(oDivPage, 'transform', 'perspective(1000px) rotateY('+now.y+'deg)');
}
oDivShadow.style.background='rgba(0,0,0,'+now.opacity+')';
}, function (){
now=next();
ready=true;
}, 14);
});
var setStyle3 =function(obj, name, value)
{
obj.style['Webkit'+name.charAt(0).toUpperCase()+name.substring(1)]=value;
obj.style['Moz'+name.charAt(0).toUpperCase()+name.substring(1)]=value;
obj.style['ms'+name.charAt(0).toUpperCase()+name.substring(1)]=value;
obj.style['O'+name.charAt(0).toUpperCase()+name.substring(1)]=value;
obj.style[name]=value;
};
var setStyle = function(obj, json){
};
var rnd = function (n, m){
return Math.random()*(m-n)+n;
};
});
var Utils = {
setStyle :function(obj,json){
if(obj.length)
for(var i=0;i<obj.length;i++) Utils.setStyle(obj[i], json);
else
{
if(arguments.length==2)
for(var i in json) obj.style[i]=json[i];
else
obj.style[arguments[1]]=arguments[2];
}
},
setStyle3 : function(obj, name, value){
obj.style['Webkit'+name.charAt(0).toUpperCase()+name.substring(1)]=value;
obj.style['Moz'+name.charAt(0).toUpperCase()+name.substring(1)]=value;
obj.style['ms'+name.charAt(0).toUpperCase()+name.substring(1)]=value;
obj.style['O'+name.charAt(0).toUpperCase()+name.substring(1)]=value;
obj.style[name]=value;
},
rnd : function(n,m){
return Math.random()*(m-n) + n ;
}
}

昨天再blueidea 看到的代码简单改了下个人喜欢爆炸那个 chrome还带声音了超屌

CSS3图片展示效果.rar (

weixin_34402408

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
超厉害的CSS3图片破碎爆炸效果！

Java代码 var fx = { buffer : function(obj, cur, target, fnDo, fnEnd, fs){ if(!fs)fs=6; var now={}; var x=0; var v=0; ...
复制链接

扫一扫