css3+js翻页效果一：爆炸翻页

这是一个系列，代码大同小异，第一个做一个详细的说明：

思路是在div里面铺一层span，span是100*100像素的，详解如图：

rc.png

以下是css样式代码：

    *{margin: 0; padding: 0;}
    html,body{
        /*防止页面抖动*/
        overflow: hidden;
    }
    #box{
        width:700px;
        height:400px;
       background:#ccc;
        position:relative;
        /*需要加上第二张图*/
        background:url("img/1.jpg") no-repeat;
        margin:100px auto;
    }
    #box span{
        width:100px;
        height:100px;
        position:absolute;        background:url("img/0.jpg") no-repeat;
        /*使用是需要先初始化*/
        transform: perspective(800px) translate(0,0) rotateX(0deg) rotateY(0deg) scale(1);
    }

布局很简单，就是一个孤独的div：

<div id="box"></div>

重点部分，js代码部分：

/*随机数函数*/
function rnd(m,n){
    return parseInt(m+Math.random()*(n-m));
}
/*事件绑定，这里没有处理兼容*/
document.addEventListener('DOMContentLoaded',function(){
    var oBox=document.getElementById('box');
    //水平方向有7个span，垂直方向有4个span
    var R=4;
    var C=7;
    //先循环创建28个span
    for(var r=0; r<R; r++){
        for(var c=0; c<C; c++){
            var aSpan=document.createElement('span');
            /*先求span宽高*/
            var w=oBox.offsetWidth/C;
            var h=oBox.offsetHeight/R;
            aSpan.style.width=w+'px';
            aSpan.style.height=h+'px';
            /*给每个span定位*/
            aSpan.style.left=w*c+'px';
            aSpan.style.top=h*r+'px';
            /*添加到box*/
            oBox.appendChild(aSpan);
            /*span里面的背景图片也需要定位*/ 
           aSpan.style.backgroundPosition=(-aSpan.offsetLeft)+'px '+(-aSpan.offsetTop)+'px';
        }
    }
    var aSpan=oBox.children;
    /*当前图片*/
    var iNow=0;
    /*加一个开关，以防鼠标点击太快出错*/
    var bReady=true;
    oBox.onclick=function(){
        if(bReady==false){
            return;
        }
        bReady=false;
       iNow++; 
       for(var i=0;i<aSpan.length;i++){
            /*计算span运动的距离，下面有图说明*/
            var x=aSpan[i].offsetLeft+aSpan[i].offsetWidth/2-oBox.offsetWidth/2;            
            var y=aSpan[i].offsetTop+aSpan[i].offsetHeight/2-oBox.offsetHeight/2;
            /*过渡时间*/
            aSpan[i].style.transition='1s all ease';
            /*图片运动*/
            aSpan[i].style.transform='perspective(800px) translate('+x+'px,'+y+'px) rotateX('+rnd(-180,180)+'deg) rotateY('+rnd(-180,180)+'deg) scale(1.4)';
            /*透明度需要更改为0*/
            aSpan[i].style.opacity=0;
        }
    };
    /*运动结束触发该事件，谁运动加给谁*/
    aSpan[aSpan.length-1].addEventListener('transitionend',function(){        for(var i=0;i<aSpan.length;i++){
            /*图片瞬间拉回*/
            aSpan[i].style.transition='none';
            aSpan[i].style.transform='perspective(800px) translate(0,0) rotateX(0deg) rotateY(0deg) scale(1)';
            /*透明度记得改回来*/
            aSpan[i].style.opacity=1;
            /*换图*/
            aSpan[i].style.backgroundImage='url("img/'+iNow%3+'.jpg")';  
          oBox.style.backgroundImage='url("img/'+((iNow+1)%3)+'.jpg")'; 
           bReady=true;
        }
    },false);
},false);

计算span炸开的距离用下图说明：（有点乱，就看彩色的线吧）

111.png

效果图：

555.png