思路：給一個div設置一個背景圖片1.jpg，然后在這個div上面用兩個for循環動態的創建一個列數為C行數為R數量的span，並給這些span設置寬高、定位並設置背景圖片0.jpg，然后設置每個span的background-position，使這組span平鋪在div上。當點擊div時換圖，換圖的實現方法是循環每個span，以div的寬度的中線為定位線，讓這組span隨機進行transform，然后在結束的時候讓span的透明度變為透明，並且瞬間拉回全部span到原始位置並更換span和div的背景圖片為下一組的圖片（注意div的背景圖片永遠是span的背景圖片的下一張）；可以將此效果自動進行圖片的更換，變成選項卡
轉載請注明‘轉載於Jason齊齊的博客http://www.cnblogs.com/jasonwang2y60/’
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>爆炸效果換圖</title>
<link rel="stylesheet" href="stylesheets/base.css">
<style>
body{
background:#000;
}
body,html{
width: 100%;
height: 100%;
overflow:hidden;
}
#box{
width:900px;
height:500px;
background:url(images/img_tabs/1.jpg) no-repeat;
background-size:cover;
margin:100px auto;
position:relative;
}
#box span{
width: 100%;
height: 100%;
position:absolute;
top: 0;
left: 0;
background:url(images/img_tabs/0.jpg);
transform:rotateY(0deg);
}
</style>
<script>
function rnd(m,n){
return parseInt(Math.random()*(n-m)+m);
}
window.onload=function(){
var oBox=document.getElementById('box');
var C=7;
var R=8;
for(var i=0;i<R;i++){
for(var j=0;j<C;j++){
var oSpan=document.createElement('span');
oSpan.style.width=oBox.offsetWidth/R+'px';
oSpan.style.height=oBox.offsetHeight/C+'px';
oSpan.style.left=i*oBox.offsetWidth/R+'px';
oSpan.style.top=j*oBox.offsetHeight/C+'px';
oBox.appendChild(oSpan);
oSpan.style.backgroundPosition=-oSpan.offsetLeft+'px -'+oSpan.offsetTop+'px';
}
}
var bReady=false;
var iNow=0;
oBox.onclick=function(){
if(bReady){return;}
bReady=true;
iNow++;
var aSpan=oBox.children;
for(var i=0;i<aSpan.length;i++){
aSpan[i].style.transition='.4s all ease';
var x=aSpan[i].offsetWidth/2+aSpan[i].offsetLeft-oBox.offsetWidth/2;
var y=aSpan[i].offsetHeight/2+aSpan[i].offsetTop-oBox.offsetHeight/2;
aSpan[i].style.transform='perspective(800px) translateX('+x+'px) translateY('+y+'px) rotateX('+rnd(-180,180)+'deg) rotate('+rnd(-180,180)+'deg) scale(1.4)';
aSpan[i].style.opacity='0';
}
aSpan[0].addEventListener('transitionend',function(){
bReady=false;
for(var i=0;i<aSpan.length;i++){
aSpan[i].style.transition='none';
aSpan[i].style.transform='perspective(800px) translateX(0) translateY(0) rotateX(0) rotateY(0) scale(1)';
aSpan[i].style.opacity=1;
aSpan[i].style.backgroundImage='url(images/img_tabs/'+iNow%3+'.jpg)';
oBox.style.backgroundImage='url(images/img_tabs/'+(iNow+1)%3+'.jpg)';
}
},false);
};
};
</script>
</head>
<body>
<div id="box">
</div>
</body>
</html>