HTML5製作書籍翻頁特效
相信大家應該在各大電子產品上都看到過這動畫，是不是感覺很實用呀
需要書籍翻頁特效完整項目的可以加群499415298獲取
下面給大家看看jQuery源碼：
$(function(){
var pageNum = 0;
for (var i = 0; i < $('.runPage').length; i++) {
$('.runPage').eq(i).css('z-index',7-2*i);
$('.runPage').eq(i).children('div').css('z-index',7-2*i);
$('.runPage').eq(i).children('img').css('z-index',6-2*i);
};
$('.nextBtn').bind('click',function(){
if ( pageNum <= 2 ) {
runNext(pageNum);
pageNum++;
};
console.log(pageNum);
});
function runNext(index){
$('.runPage').eq(index).addClass('runClass');
zIndexNext(index,$('.runPage').eq(index));
}
function zIndexNext(index,element){
if ( index >= 1 ) {
element.css('z-index',3+2*index);
};
setTimeout(function(){
if (index==0) {
element.css('z-index',3+2*index);
};
element.children('div').css('z-index',2+2*index);
element.children('img').css('z-index',3+2*index);
},1000);
}
$('.lastBtn').bind('click',function(){
if ( pageNum >= 1 ) {
pageNum--;
runLast(pageNum);
};
console.log(pageNum);
});
function runLast(index){
$('.runPage').eq(index).removeClass('runClass');
zIndexLast(index,$('.runPage').eq(index));
}
function zIndexLast(index,element){
if (index == 0) {
element.css('z-index',7-2*index);
};
setTimeout(function(){
element.css('z-index',7-2*index);
element.children('div').css('z-index',7-2*index);
element.children('img').css('z-index',6-2*index);
},1000);
}
});
用代碼將夢想照進現實，讓優秀變成一種習慣！
