颗粒翻页,css3效果展示

用css3效果做了一个颗粒翻页效果,布局上,一张图片做底层,在这张图片上用js创建一层小的行和列各为r和c的小span,给这些span分别设置background-position;用来覆盖原来的一张图片(创建span的时候利用DOM操作,利用两个循环分别创建行和列,然后在循环中创建元素和设置元素css属性);然后在点击的时候添加事件,使用transform设置翻转效果,这里,我们可以设置逐个翻转和斜线翻转(斜线翻转利用的是span的行和列相加值相等原理);这里需要注意的是设置图片播放顺序,span上的图片永远比下面div的整张图片小一级,并且在更换图片的完成的时候瞬时间更换span和div的图片,使之继续符合上述的图片层级,这个时间差,人眼是无法识别的。

大体我的思路就是这样,写的不是很清楚,现在想来,做一个合格的优秀的程序员,语言表达确实是比较重要的,因为分享和学习才是一个人不断进步的基础。

话不多说,直接上代码,希望大家一起分享一起进步

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>颗粒翻转</title>
<style>
    *{margin:0;padding:0;}
    #box{width:700px;
        height: 400px;
        margin:50px auto;
        position: relative;
    }
    #box span{
        position: absolute;
        width: 100%;
        height: 100%;
        transition:1s all ease;
        transform:rotateY(0deg);
        transform-style:preserve-3d;
    }
    #box span em{
        width: 100%;
        height: 100%;
        position: absolute;
        left: 0;
        top: 0;
    }
    #box .front{
        background-image: url("img/0.jpg");
        transform:translateZ(1px);
    }
    #box .back{
        background-image: url("img/1.jpg");
        transform:translateZ(-1px) scale(-1,1);
    }
    #box:active span{
        /*transform:rotateY(180deg);*/
    }
</style>
<script>
    window.onload = function(){
        var oBox = document.getElementById('box');
        var C = 7;
        var R = 4;
        for(var r = 0;r<R;r++){
            for(var c = 0;c<C;c++){
                var oSpan = document.createElement('span');
                oSpan.style.width = oBox.offsetWidth/C +'px';
                oSpan.style.height = oBox.offsetHeight/R +'px';
                oSpan.style.left = oBox.offsetWidth/C*c+'px';
                oSpan.style.top = oBox.offsetHeight/R*r+'px';
                oSpan.innerHTML ='<em class="front"></em><em class="back"></em>';
                oBox.appendChild(oSpan);
                oSpan.children[0].style.backgroundPosition = -oSpan.offsetLeft+'px '+-oSpan.offsetTop+'px';
                oSpan.children[1].style.backgroundPosition = -oSpan.offsetLeft+'px '+-oSpan.offsetTop+'px';
                oSpan.r = r;
                oSpan.c = c;
            }
        }
        var iNow=0;
        var bReady = true;
        oBox.onclick = function(){
            if(bReady==false){return;}
            bReady = false;
            iNow++;
            var aSpan = oBox.children;
            for(var i = 0;i<aSpan.length;i++){
                aSpan[i].style.transition = '1s all ease '+100*(aSpan[i].r+aSpan[i].c)+'ms';
                aSpan[i].style.transform ='rotateY(180deg)';
            }
            //换图
            aSpan[aSpan.length-1].addEventListener('transitionend',function(){
                bReady = true;
                for(var i = 0;i<aSpan.length;i++){
                    aSpan[i].style.transition = 'none';
                    aSpan[i].style.transform ='rotateY(0deg)';
                    aSpan[i].children[0].style.backgroundImage ='url("img/'+(iNow%3)+'.jpg")';
                    aSpan[i].children[1].style.backgroundImage ='url("img/'+(iNow+1)%3+'.jpg")';
                }
            },false)
        };
    };
</script>
</head>
<body>
    <div >
    </div>
</body>
</html>