jquery实现2d分页
程序员文章站
2022-03-18 11:39:29
...
点击页码按钮,分动画切换到相应的页面,效果如下图
这是真实环境的效果,你也可以前往此处观看,点击如下圈圈处切换,
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 btnMask(){ } function removeBtnMask(){ alert("最后一个翻完"); } function turnPage(pageNo){ btnMask(); var imgQty=$("#dbRoWrap div").size(); var timeInterval=200; var i=0; $("#dbRoWrap div").each(function(){//遍历dbRoWrap下的所有图片容器 var obj=$(this); doTurnPage(i,pageNo,obj,timeInterval,imgQty); i=i+1; }); } function doTurnPage(i,pageNo,obj,timeInterval,imgQty){ var opt={rotateSpeed:100}; timeInterval=timeInterval*i; $(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});//设置图片容器的宽高 setTimeout(function(){ $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,function(){ if(i==(imgQty-1)){ removeBtnMask(); } }); },timeInterval);//设置轮着翻页 }); }
源文件在附件中
如果您觉得我的文章给了您帮助,请为我买一杯饮料吧!以下是我的支付宝,意思一下我将非常感激!
下一篇: apache poi拆分excel表格