颗粒翻页（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 id="box">
    </div>
</body>
</html>

　　

posted @ 2016-10-22 01:02  Jason齐齐  阅读(1104)  评论(0)    收藏  举报