文件名称：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)