html5翻页原理,爆炸翻页HTML5+CSS3

李立昌 http://www.jianshu.com/users/b1e8423ae7e2/latest_articles

*{

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);

}

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

for(var c = 0;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

//爆炸开

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[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);