颗粒翻页（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>

巴特西

颗粒翻页（css3效果展示）

最新文章

热门文章