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