爆炸翻页.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;
}
html,body{ overflow: hidden;}
#box{
width: 700px;
height: 400px;
background:url("img/1.jpg") no-repeat;
margin:100px auto;
position: relative;
}
#box span{
position: absolute;
background:url("img/0.jpg") no-repeat;
transform:perspective(800px) translate(0,0) rotateX(0deg) rotateY(0deg) scale(1);
}
</style>
<script>
function rnd(m,n){
return parseInt(m+Math.random()*(n-m));
}
document.addEventListener('DOMContentLoaded',function(){
var oBox = document.getElementById('box');
//1铺span
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';
oBox.appendChild(oSpan);
oSpan.style.backgroundPosition = -oSpan.offsetLeft+'px -'+oSpan.offsetTop+'px';
}
}
//点击
var aSpan = oBox.children;
var iNow = 0;
var bReady = true;
oBox.onclick = function(){
if(bReady==false){return;}
bReady = false;
iNow++;
for(var i = 0;i<aSpan.length;i++){
//爆炸开
var x = aSpan[i].offsetLeft+aSpan[i].offsetWidth/2 - oBox.offsetWidth/2;
var y = aSpan[i].offsetTop+aSpan[i].offsetHeight/2 - oBox.offsetHeight/2;
aSpan[i].style.transition = '1s all ease';
aSpan[i].style.transform = 'perspective(800px) translate('+x+'px,'+y+'px) rotateX('+rnd(-180,180)+'deg) rotateY('+rnd(-180,180)+'deg) scale(1.4)';
aSpan[i].style.opacity = 0;
}
};
aSpan[0].addEventListener('transitionend',function(){
//瞬间拉回
bReady = true;
for(var i = 0;i<aSpan.length;i++){
aSpan[i].style.transition = 'none';
aSpan[i].style.transform = 'perspective(800px) translate(0,0) rotateX(0deg) rotateY(0deg) scale(1)';
aSpan[i].style.opacity = 1;
//换图
aSpan[i].style.backgroundImage = 'url("img/'+iNow%3+'.jpg")';
oBox.style.backgroundImage = 'url("img/'+((iNow+1)%3)+'.jpg")';
}
},false);
},false);
</script>
</head>
<body>
<div id="box">
</div>
</body>
</html>
