css3+jq翻页效果二：颗粒翻页

将js改成了jq，请多指教!!!!

css样式：

*{margin: 0; padding: 0}
    #box{
        width:700px;
        height:400px;
        background:#ccc;
        position:relative;
        margin:100px auto;
    }
    #box span{
        width:100px;
        height:100px;
        position:absolute;
        transition: 1s all ease;
        transform-style: preserve-3d;
        transform: perspective(800px) rotate(0deg);
    }
    #box span .front{
        width:100%;
        height:100%;
        position:absolute;
        top:0;
        left:0;
        transform: translateZ(1px);
        background:url("img/0.jpg") no-repeat;
    }
    #box span .back{
        width:100%;
        height:100%;
        position:absolute;
        top:0;
        left:0;
        transform:scale(-1,1) translateZ(-1px);
        background:url("img/1.jpg") no-repeat;
    }

布局给个div就行：

<div id="box">
    <!--<span>
        <em class="front"></em>
        <em class="back"></em>
    </span>
    <span></span>-->
</div>

jq代码(别忘了加jq文件)

<script src="jquery-1.7.2.js"></script>

$(function(){
    var oBox=$('#box');
    var R=4;
    var C=7;
    for(var r=0;r<R;r++){
        for(var c=0;c<C;c++){
            var oSpan=$('<span><em class="front"></em><em class="back"></em></span>');
            var w=oBox.width()/C;
            var h=oBox.height()/R;
            oSpan.css({width:w+'px',height:h+'px',left:(w*c)+'px',top:(h*r)+'px'});            oSpan.appendTo(oBox);
            oSpan.attr({r:r,c:c});
            oSpan.children().eq(0).css({backgroundPosition:(-oSpan.position().left)+'px '+(-oSpan.position().top)+'px'});
            oSpan.children().eq(1).css({backgroundPosition:(-oSpan.position().left)+'px '+(-oSpan.position().top)+'px'});
        }
    }
    var iNow=0;
    var aSpan=oBox.children();
    var bReady=true;
    $(document).on('click',function(){
        if(bReady==false){
            return;
        }
        bReady=false;
        iNow++;
        for(var i=0;i<aSpan.length;i++){
            aSpan.eq(i).css({transition:'1s all ease '+200*(parseInt(aSpan.eq(i).attr("r"))+parseInt(aSpan.eq(i).attr("c")))+'ms',transform:'perspective(800px) rotateY(180deg)'});
        }
    });
    aSpan.eq(aSpan.length-1).on('transitionend',function(){
        for(var i=0;i<aSpan.length;i++){
            aSpan.eq(i).css({transition:'none',transform:'perspective(800px) rotateY(0deg)'});            aSpan.eq(i).children().eq(0).css({backgroundImage:'url("img/'+iNow%3+'.jpg")'});
            aSpan.eq(i).children().eq(1).css({backgroundImage:'url("img/'+((iNow+1)%3)+'.jpg")'});
        }
        bReady=true;
    });
});

效果图：

Paste_Image.png