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

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还带声音了 超屌

• CSS3图片展示效果.rar (