程序员用jQuery开发2017企业最实用的项目

HTML5制作书籍翻页特效

相信大家应该在各大电子产品上都看到过这动画,是不是感觉很实用呀

程序员用jQuery开发2017企业最实用的项目

需要书籍翻页特效完整项目的可以加群499415298获取

程序员用jQuery开发2017企业最实用的项目

下面给大家看看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);

}

});

用代码将梦想照进现实,让优秀变成一种习惯!

程序员用jQuery开发2017企业最实用的项目

程序员用jQuery开发2017企业最实用的项目

  • 我的微信
  • 这是我的微信扫一扫
  • weinxin
  • 我的微信公众号
  • 我的微信公众号扫一扫
  • weinxin
avatar

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: