颗粒翻页HTML5+CSS3

作者: 函数function | 来源:发表于2016-12-03 17:27 被阅读0次

颗粒翻页HTML5+CSS3
爆炸翻页HTML5+CSS3
立体翻页HTML5+CSS3
css3+js翻页效果二：颗粒翻页
css3+jq翻页效果二：颗粒翻页
3Df翻页HTML5+CSS3
javascript设计模式——亨元模式
翻页，再翻页
动画翻页书 —— 不忘初心童心童趣
每天一条linux命令——less

颗粒翻页.png

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>李立昌 http://www.jianshu.com/users/b1e8423ae7e2/latest_articles</title>
<style>
    *{
        margin: 0;
        padding: 0;
    }
    #box{
        width: 700px;
        height: 400px;
        background: #ccc;
        margin:50px auto;
        position: relative;
    }
    #box span{
        position: absolute;
        transform-style: preserve-3d;
        transform:perspective(800px) rotateY(0deg);
    }
    #box span .front{
        width:100%;
        height: 100%;
        position: absolute;
        transform:translateZ(1px);
        background: url("img/0.jpg") no-repeat;
    }
    #box span .back{
        width:100%;
        height: 100%;
        position: absolute;
        transform:scale(-1,1) translateZ(-1px);
        background: url("img/1.jpg") no-repeat;
    }

</style>
<script>
    document.addEventListener('DOMContentLoaded',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++){
                //创建span
                var oSpan = document.createElement('span');
                var w = oBox.offsetWidth/C;
                var h = oBox.offsetHeight/R;
                oSpan.style.width = w +'px';
                oSpan.style.height = h +'px';
                oSpan.style.left = w*c+'px';
                oSpan.style.top = h*r+'px';
                oSpan.innerHTML = '<em class="front"></em><em class="back"></em>';
                oBox.appendChild(oSpan);
                oSpan.c = c;
                oSpan.r = r;
                oSpan.children[0].style.backgroundPosition = -oSpan.offsetLeft+'px -'+oSpan.offsetTop+'px';
                oSpan.children[1].style.backgroundPosition = -oSpan.offsetLeft+'px -'+oSpan.offsetTop+'px';
            }
        }
        var iNow = 0;
        var bReady = true;
        //点击
        var aSpan = oBox.children;
        oBox.onclick = function(){
            if(bReady==false){return;}
            bReady = false;
            iNow++;
            for(var i=0;i<aSpan.length;i++){
                aSpan[i].style.transition = '1s all ease '+200*(aSpan[i].r+aSpan[i].c)+'ms';
                aSpan[i].style.transform = 'perspective(800px) 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 = 'perspective(800px) rotateY(0deg)';
                //console.log(iNow,iNow%3,iNow+1)%3);
                //换图
                aSpan[i].children[0].style.backgroundImage = 'url("img/'+iNow%3+'.jpg")';
                aSpan[i].children[1].style.backgroundImage = 'url("img/'+((iNow+1)%3)+'.jpg")';
            }
        },false);
    },false);
</script>
</head>
<body>
<div id="box"></div>
</body>
</html>