【文件属性】：
文件名称：2D翻转分页
文件大小：96KB
文件格式：ZIP
更新时间：2018-04-15 14:47:22
翻转分页
实现页面批量图片元素翻页效果,有问题联系我
var page1=["img/blue1.png","img/red1.png","img/white1.png"];//第1页
var page2=["img/blue2.png","img/red2.png","img/white2.png"];//第2页
var page3=["img/blue3.png","img/red3.png","img/white3.png"];//第3页
var dataList=new Array();
dataList.push(page1);
dataList.push(page2);
dataList.push(page3);
$(document).ready(function(){
var f=0;
$("#dbRoWrap img").each(function(){//初始化第一页数据
$(this).attr("src",page1[f]);
f=f+1;
});
$("#btn1").click(function(){
turnPage(1);
});
$("#btn2").click(function(){
turnPage(2);
});
$("#btn3").click(function(){
turnPage(3);
});
});
function turnPage(pageNo){
var i=0;
$("#dbRoWrap div").each(function(){//遍历dbRoWrap下的所有图片容器
doTurnPage(i,pageNo,$(this));
i=i+1;
});
}
function doTurnPage(i,pageNo,obj){
var opt={rotateSpeed:100 };
$(obj).each(function(){//遍历图片容器中的图片
var $this=$(this);
var $img=$this.find('img');
var imgWidth=$img.width();
var imgHeight=$img.height();
$this.css({'width':imgWidth,'height':imgHeight});//设置图片容器的宽高
$img.stop()
.animate({'left':imgWidth/2,'width':0},opt.rotateSpeed,function(){
$(this).attr({'src':dataList[pageNo-1][i]});//设置图片路径
}).animate({'left':0,'width':imgWidth},opt.rotateSpeed);
});
}
【文件预览】：
2Dpage
----css()
--------dbRotate2D.css(354B)
----2Dpage.html(1KB)
----img()
--------blue4.png(8KB)
--------blue2.png(8KB)
--------red3.png(8KB)
--------red1.png(6KB)
--------white1.png(5KB)
--------white4.png(6KB)
--------white2.png(5KB)
--------red4.png(7KB)
--------blue1.png(8KB)
--------red2.png(7KB)
--------white3.png(9KB)
--------.DS_Store(6KB)
--------blue3.png(10KB)
----js()
--------2Dpage.js(1KB)
--------jquery.js(2KB)
--------.DS_Store(6KB)
----.DS_Store(6KB)