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

时间：2021-03-06 08:35:43
  1. var fx  = {
  2. buffer : function(obj, cur, target, fnDo, fnEnd, fs){
  3. if(!fs)fs=6;
  4. var now={};
  5. var x=0;
  6. var v=0;
  7. if(!obj.__last_timer)obj.__last_timer=0;
  8. var t=new Date().getTime();
  9. if(t-obj.__last_timer>20)
  10. {
  11. fnMove();
  12. obj.__last_timer=t;
  13. }
  14. clearInterval(obj.timer);
  15. obj.timer=setInterval(fnMove, 20);
  16. function fnMove(){
  17. v=Math.ceil((100-x)/fs);
  18. x+=v;
  19. for(var i in cur)
  20. {
  21. now[i]=(target[i]-cur[i])*x/100+cur[i];
  22. }
  23. if(fnDo)fnDo.call(obj, now);
  24. if(Math.abs(v)<1 && Math.abs(100-x)<1)
  25. {
  26. clearInterval(obj.timer);
  27. if(fnEnd)fnEnd.call(obj, target);
  28. }
  29. }
  30. },
  31. flex : function(obj, cur, target, fnDo, fnEnd, fs, ms){
  32. var MAX_SPEED=16;
  33. if(!fs)fs=6;
  34. if(!ms)ms=0.75;
  35. var now={};
  36. var x=0;    //0-100
  37. if(!obj.__flex_v)obj.__flex_v=0;
  38. if(!obj.__last_timer)obj.__last_timer=0;
  39. var t=new Date().getTime();
  40. if(t-obj.__last_timer>20)
  41. {
  42. fnMove();
  43. obj.__last_timer=t;
  44. }
  45. clearInterval(obj.timer);
  46. obj.timer=setInterval(fnMove, 20);
  47. function fnMove(){
  48. obj.__flex_v+=(100-x)/fs;
  49. obj.__flex_v*=ms;
  50. if(Math.abs(obj.__flex_v)>MAX_SPEED)obj.__flex_v=obj.__flex_v>0?MAX_SPEED:-MAX_SPEED;
  51. x+=obj.__flex_v;
  52. for(var i in cur)
  53. {
  54. now[i]=(target[i]-cur[i])*x/100+cur[i];
  55. }
  56. if(fnDo)fnDo.call(obj, now);
  57. if(Math.abs(obj.__flex_v)<1 && Math.abs(100-x)<1)
  58. {
  59. clearInterval(obj.timer);
  60. if(fnEnd)fnEnd.call(obj, target);
  61. obj.__flex_v=0;
  62. }
  63. }
  64. },
  65. linear : function (obj, cur, target, fnDo, fnEnd, fs){
  66. if(!fs)fs=50;
  67. var now={};
  68. var x=0;
  69. var v=0;
  70. if(!obj.__last_timer)obj.__last_timer=0;
  71. var t=new Date().getTime();
  72. if(t-obj.__last_timer>20)
  73. {
  74. fnMove();
  75. obj.__last_timer=t;
  76. }
  77. clearInterval(obj.timer);
  78. obj.timer=setInterval(fnMove, 20);
  79. v=100/fs;
  80. function fnMove(){
  81. x+=v;
  82. for(var i in cur)
  83. {
  84. now[i]=(target[i]-cur[i])*x/100+cur[i];
  85. }
  86. if(fnDo)fnDo.call(obj, now);
  87. if(Math.abs(100-x)<1)
  88. {
  89. clearInterval(obj.timer);
  90. if(fnEnd)fnEnd.call(obj, target);
  91. }
  92. }
  93. },
  94. stop:function (obj){
  95. clearInterval(obj.timer);
  96. },
  97. move3 : function(obj, json, fnEnd, fTime, sType){
  98. var addEnd=fx.addEnd;
  99. fTime||(fTime=1);
  100. sType||(sType='ease');
  101. setTimeout(function (){
  102. Utils.setStyle3(obj, 'transition', sprintf('%1s all %2', fTime, sType));
  103. addEnd(obj, function (){
  104. Utils.setStyle3(obj, 'transition', 'none');
  105. if(fnEnd)fnEnd.apply(obj, arguments);
  106. }, json);
  107. setTimeout(function (){
  108. if(typeof json=='function')
  109. json.call(obj);
  110. else
  111. Utils.setStyle(obj, json);
  112. }, 0);
  113. }, 0);
  114. }
  115. };
  116. //监听css3运动终止
  117. (function (){
  118. var aListener=[];   //{obj, fn, arg}
  119. if(!Modernizr.csstransitions)return;
  120. if(window.navigator.userAgent.toLowerCase().search('webkit')!=-1)
  121. {
  122. document.addEventListener('webkitTransitionEnd', endListrner, false);
  123. }
  124. else
  125. {
  126. document.addEventListener('transitionend', endListrner, false);
  127. }
  128. function endListrner(ev)
  129. {
  130. var oEvObj=ev.srcElement||ev.target;
  131. //alert(aListener.length);
  132. for(var i=0;i<aListener.length;i++)
  133. {
  134. if(oEvObj==aListener[i].obj)
  135. {
  136. aListener[i].fn.call(aListener[i].obj, aListener[i].arg);
  137. aListener.remove(aListener[i--]);
  138. }
  139. }
  140. }
  141. fx.addEnd=function (obj, fn, arg)
  142. {
  143. if(!obj || !fn)return;
  144. aListener.push({obj: obj, fn: fn, arg: arg});
  145. }
  146. })();
  147. $(function(){
  148. var now=0;
  149. var ready=true;
  150. var W=700;
  151. var H=400;
  152. var $img = $("#img");
  153. var oDiv = $img.get(0);
  154. var next =function(){
  155. return (now+1)%3;
  156. }
  157. //爆炸
  158. $("#btn_explode").on("click",function(){
  159. if(!ready)return;
  160. ready=false;
  161. var R=4;
  162. var C=7;
  163. var cw=W/2;
  164. var ch=H/2;
  165. oDiv.innerHTML='';
  166. oDiv.style.background='url(images/'+(next()+1)+'.jpg) center no-repeat';
  167. var aData=[];
  168. var wait=R*C;
  169. for(var i=0;i<R;i++){
  170. for(var j=0,k=0;j<C;j++,k++)
  171. {
  172. aData[i]={left: W*j/C, top: H*i/R};
  173. var oNewDiv=$('<div>');
  174. oNewDiv.css({
  175. position: 'absolute',
  176. width:Math.ceil(W/C)+'px',
  177. height: Math.ceil(H/R)+'px',
  178. background: 'url(images/'+(now+1)+'.jpg) '+-aData[i].left+'px '+-aData[i].top+'px no-repeat',
  179. left: aData[i].left+'px',
  180. top: aData[i].top+'px'
  181. });
  182. oDiv.appendChild(oNewDiv[0]);
  183. var l=((aData[i].left+W/(2*C))-cw)*Utils.rnd(2,3)+cw-W/(2*C);
  184. var t=((aData[i].top+H/(2*R))-ch)*Utils.rnd(2,3)+ch-H/(2*R);
  185. setTimeout((function (oNewDiv,l,t){
  186. return function ()
  187. {
  188. fx.buffer(
  189. oNewDiv,
  190. {   left: oNewDiv.offsetLeft,
  191. top: oNewDiv.offsetTop  ,
  192. opacity: 100,
  193. x:0,
  194. y:0,
  195. z:0,
  196. scale:1,
  197. a:0
  198. },
  199. {   left: l,
  200. top: t,
  201. opacity: 0,
  202. x:Utils.rnd(-180, 180),
  203. y:Utils.rnd(-180, 180),
  204. z:Utils.rnd(-180, 180),
  205. scale:Utils.rnd(1.5, 3),
  206. a:1
  207. },
  208. function (now){
  209. this.style.left=now.left+'px';
  210. this.style.top=now.top+'px';
  211. this.style.opacity=now.opacity/100;
  212. Utils.setStyle3(oNewDiv, 'transform', 'perspective(500px) rotateX('+now.x+'deg) rotateY('+now.y+'deg) rotateZ('+now.z+'deg) scale('+now.scale+')');
  213. }, function (){
  214. setTimeout(function (){
  215. oDiv.removeChild(oNewDiv);
  216. }, 200);
  217. if(--wait==0)
  218. {
  219. ready=true;
  220. now=next();
  221. }
  222. }, 10
  223. );
  224. };
  225. })(oNewDiv[0],l,t), Utils.rnd(0, 200));
  226. }
  227. }
  228. });
  229. //翻转
  230. $("#btn_tile").on("click",function(){
  231. if(!ready)return;
  232. ready=false;
  233. var R=3;
  234. var C=6;
  235. var wait=R*C;
  236. var dw=Math.ceil(W/C);
  237. var dh=Math.ceil(H/R);
  238. oDiv.style.background='none';
  239. oDiv.innerHTML='';
  240. for(var i=0;i<C;i++)
  241. {
  242. for(var j=0;j<R;j++)
  243. {
  244. var oNewDiv=document.createElement('div');
  245. var t=Math.ceil(H*j/R);
  246. var l=Math.ceil(W*i/C);
  247. Utils.setStyle(oNewDiv, {
  248. position: 'absolute', background: 'url(images/'+(now+1)+'.jpg) '+-l+'px '+-t+'px no-repeat',
  249. left: l+'px', top: t+'px', width: dw+'px', height: dh+'px'
  250. });
  251. (function (oNewDiv, l, t){
  252. oNewDiv.ch=false;
  253. setTimeout(function (){
  254. fx.linear(oNewDiv, {y:0}, {y:180}, function (now){
  255. if(now.y>90 && !oNewDiv.ch)
  256. {
  257. oNewDiv.ch=true;
  258. oNewDiv.style.background='url(images/'+(next()+1)+'.jpg) '+-l+'px '+-t+'px no-repeat';
  259. }
  260. if(now.y>90)
  261. {
  262. Utils.setStyle3(oNewDiv, 'transform', 'perspective(500px) rotateY('+now.y+'deg) scale(-1,1)');
  263. }
  264. else
  265. {
  266. Utils.setStyle3(oNewDiv, 'transform', 'perspective(500px) rotateY('+now.y+'deg)');
  267. }
  268. }, function (){
  269. if((--wait)==0)
  270. {
  271. ready=true;
  272. now=next();
  273. }
  274. }, 22);
  275. }, /*(i+j*R)*120*/(i+j)*200);
  276. })(oNewDiv, l, t);
  277. oDiv.appendChild(oNewDiv);
  278. }
  279. }
  280. });
  281. //扭曲
  282. $("#btn_bars").on("click",function(){
  283. if(!ready)return;
  284. ready=false;
  285. var C=7;
  286. var wait=C;
  287. var dw=Math.ceil(W/C);
  288. oDiv.style.background='none';
  289. oDiv.innerHTML='';
  290. for(var i=0;i<C;i++)
  291. {
  292. var oNewDiv=document.createElement('div');
  293. Utils.setStyle(oNewDiv, {
  294. width: dw+'px', height: '100%', position: 'absolute', left: W*i/C+'px', top: 0
  295. });
  296. Utils.setStyle3(oNewDiv, 'transformStyle', 'preserve-3d');
  297. Utils.setStyle3(oNewDiv, 'transform', 'perspective(1000px) rotateX(0deg)');
  298. //setStyle3(oNewDiv, 'transition', '0.5s all linear');
  299. (function (oNewDiv,i){
  300. oNewDiv.style.zIndex=C/2-Math.abs(i-C/2);
  301. setTimeout(function (){
  302. fx.buffer(oNewDiv, {a:0, x:0}, {a:100, x:-90}, function (now){
  303. Utils.setStyle3(oNewDiv, 'transform', 'perspective(1000px) rotateY('+((3*(i-C/2))*(50-Math.abs(now.a-50))/50)+'deg) rotateX('+now.x+'deg)');
  304. }, function (){
  305. if(--wait==0)
  306. {
  307. ready=true;
  308. }
  309. now=next();
  310. }, 8);
  311. //setStyle3(oNewDiv, 'transform', 'perspective(1000px) rotateY('+3*(i-C/2)+'deg) rotateX(-45deg)');
  312. }, (i+1)*130);
  313. })(oNewDiv,i);
  314. oNewDiv.innerHTML='<div></div><div></div><div></div><div></div>';
  315. var oNext=oNewDiv.getElementsByTagName('div')[0];
  316. var oNow=oNewDiv.getElementsByTagName('div')[1];
  317. var oBack=oNewDiv.getElementsByTagName('div')[2];
  318. var oBack2=oNewDiv.getElementsByTagName('div')[3];
  319. Utils.setStyle([oNext, oNow, oBack, oBack2], {width: '100%', height: '100%', position: 'absolute', left: 0, top: 0});
  320. Utils.setStyle(oNext, {
  321. background: 'url(images/'+(next()+1)+'.jpg) '+-W*i/C+'px 0px no-repeat'
  322. });
  323. Utils.setStyle3(oNext, 'transform', 'scale3d(0.836,0.836,0.836) rotateX(90deg) translateZ('+H/2+'px)');
  324. Utils.setStyle(oNow, {
  325. background: 'url(images/'+(now+1)+'.jpg) '+-W*i/C+'px 0px no-repeat'
  326. });
  327. Utils.setStyle3(oNow, 'transform', 'scale3d(0.834,0.834,0.834) rotateX(0deg) translateZ('+H/2+'px)');
  328. Utils.setStyle(oBack, {
  329. background: '#666'
  330. });
  331. Utils.setStyle3(oBack, 'transform', 'scale3d(0.834,0.834,0.834) rotateX(0deg) translateZ(-'+H/2+'px)');
  332. Utils.setStyle(oBack2, {
  333. background: '#666'
  334. });
  335. Utils.setStyle3(oBack2, 'transform', 'scale3d(0.834,0.834,0.834) rotateX(90deg) translateZ(-'+H/2+'px)');
  336. oDiv.appendChild(oNewDiv);
  337. }
  338. });
  339. //立方体
  340. $("#btn_cube").on("click",function(){
  341. if(!ready)return;
  342. ready=false;
  343. oDiv.innerHTML='';
  344. oDiv.style.background='none';
  345. Utils.setStyle3(oDiv, 'transformStyle', 'preserve-3d');
  346. Utils.setStyle3(oDiv, 'transform', 'perspective(1000px) rotateY(0deg)');
  347. var oNow=document.createElement('div');
  348. var oNext=document.createElement('div');
  349. Utils.setStyle([oNow, oNext], {
  350. position: 'absolute',
  351. width: '100%',
  352. height: '100%',
  353. left: 0,
  354. top: 0
  355. });
  356. Utils.setStyle3(oNow, 'transform', 'scale3d(0.741,0.741,0.741) rotate3d(0,1,0,0deg) translate3d(0,0,'+W/2+'px)');
  357. Utils.setStyle3(oNext, 'transform', 'scale3d(0.741,0.741,0.741) rotate3d(0,1,0,90deg) translate3d(0,0,'+W/2+'px)');
  358. oDiv.appendChild(oNext);
  359. oDiv.appendChild(oNow);
  360. oNow.style.background='url(images/'+(now+1)+'.jpg) center no-repeat';
  361. oNext.style.background='url(images/'+(next()+1)+'.jpg) center no-repeat';
  362. //return;
  363. setTimeout(function (){
  364. //setStyle3(oDiv, 'transition', '1s all ease-in-out');
  365. fx.flex(oDiv, {y:0}, {y:-90}, function (now){
  366. Utils.setStyle3(oDiv, 'transform', 'perspective(1000px) rotateY('+now.y+'deg)');
  367. }, function (){
  368. Utils.setStyle3(oDiv, 'transition', 'none');
  369. Utils.setStyle3(oDiv, 'transformStyle', 'flat');
  370. Utils.setStyle3(oDiv, 'transform', 'none');
  371. oDiv.innerHTML='';
  372. oDiv.style.background='url(images/'+(next()+1)+'.jpg) center no-repeat';
  373. now=next();
  374. ready=true;
  375. }, 10, 0.6);
  376. },0);
  377. });
  378. //翻页
  379. $("#btn_turn").on("click",function(){
  380. if(!ready)return;
  381. ready=false;
  382. oDiv.innerHTML='';
  383. oDiv.style.background='url(images/'+(next()+1)+'.jpg) center no-repeat';
  384. var oDivPage=document.createElement('div');
  385. Utils.setStyle(oDivPage, {
  386. position: 'absolute', background: 'url(images/'+(now+1)+'.jpg) right no-repeat', zIndex: 3,
  387. left: '50%', top: 0, width: '50%', height: '100%', overflow: 'hidden'
  388. });
  389. Utils.setStyle3(oDivPage, 'transform', 'perspective(1000px) rotateY(0deg)');
  390. Utils.setStyle3(oDivPage, 'transformOrigin', 'left');
  391. oDiv.appendChild(oDivPage);
  392. var oDivOld=document.createElement('div');
  393. Utils.setStyle(oDivOld, {
  394. position: 'absolute', left: 0, top: 0, width: '50%', height: '100%', zIndex:2,
  395. background: 'url(images/'+(now+1)+'.jpg) left no-repeat'
  396. });
  397. oDiv.appendChild(oDivOld);
  398. var oDivShadow=document.createElement('div');
  399. Utils.setStyle(oDivShadow, {
  400. position: 'absolute', right: 0, top: 0, width: '50%', height: '100%', zIndex:2,
  401. background: 'rgba(0,0,0,1)'
  402. });
  403. oDiv.appendChild(oDivShadow);
  404. oDivPage.ch=false;
  405. fx.buffer(oDivPage, {y:0, opacity: 1}, {y:-180, opacity: 0}, function (now){
  406. if(now.y<-90 && !oDivPage.ch)
  407. {
  408. oDivPage.ch=true;
  409. oDivPage.innerHTML='<img />';
  410. var oImg=oDivPage.getElementsByTagName('img')[0];
  411. oImg.src='images//'+(next()+1)+'.jpg';
  412. Utils.setStyle3(oImg, 'transform', 'scaleX(-1)');
  413. Utils.setStyle(oImg, {
  414. position: 'absolute', right: 0, top: 0, width: '200%', height: '100%'
  415. });
  416. //setStyle3(oDivPage, 'transform', 'perspective(1000px) scale(-1,1) rotateY(-90deg)');
  417. Utils.setStyle3(oDivPage, 'transformOrigin', 'left');
  418. }
  419. if(now.y<-90)
  420. {
  421. Utils.setStyle3(oDivPage, 'transform', 'perspective(1000px) scale(-1,1) rotateY('+(180-now.y)+'deg)');
  422. }
  423. else
  424. {
  425. Utils.setStyle3(oDivPage, 'transform', 'perspective(1000px) rotateY('+now.y+'deg)');
  426. }
  427. oDivShadow.style.background='rgba(0,0,0,'+now.opacity+')';
  428. }, function (){
  429. now=next();
  430. ready=true;
  431. }, 14);
  432. });
  433. var setStyle3 =function(obj, name, value)
  434. {
  435. obj.style['Webkit'+name.charAt(0).toUpperCase()+name.substring(1)]=value;
  436. obj.style['Moz'+name.charAt(0).toUpperCase()+name.substring(1)]=value;
  437. obj.style['ms'+name.charAt(0).toUpperCase()+name.substring(1)]=value;
  438. obj.style['O'+name.charAt(0).toUpperCase()+name.substring(1)]=value;
  439. obj.style[name]=value;
  440. };
  441. var  setStyle = function(obj, json){
  442. };
  443. var rnd = function (n, m){
  444. return Math.random()*(m-n)+n;
  445. };
  446. });
  447. var Utils = {
  448. setStyle :function(obj,json){
  449. if(obj.length)
  450. for(var i=0;i<obj.length;i++) Utils.setStyle(obj[i], json);
  451. else
  452. {
  453. if(arguments.length==2)
  454. for(var i in json) obj.style[i]=json[i];
  455. else
  456. obj.style[arguments[1]]=arguments[2];
  457. }
  458. },
  459. setStyle3 : function(obj, name, value){
  460. obj.style['Webkit'+name.charAt(0).toUpperCase()+name.substring(1)]=value;
  461. obj.style['Moz'+name.charAt(0).toUpperCase()+name.substring(1)]=value;
  462. obj.style['ms'+name.charAt(0).toUpperCase()+name.substring(1)]=value;
  463. obj.style['O'+name.charAt(0).toUpperCase()+name.substring(1)]=value;
  464. obj.style[name]=value;
  465. },
  466. rnd  : function(n,m){
  467. return Math.random()*(m-n) + n ;
  468. }
  469. }

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

相关文章