欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

jquery实现2d分页

程序员文章站 2022-03-18 11:39:29
...

点击页码按钮,分动画切换到相应的页面,效果如下图

jquery实现2d分页
            
    
    博客分类: 前端技巧算法  

 

这是真实环境的效果,你也可以前往此处观看,点击如下圈圈处切换,

jquery实现2d分页
            
    
    博客分类: 前端技巧算法  

 

 

 

 

 

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);//设置轮着翻页
	  });
}

 源文件在附件中

 

如果您觉得我的文章给了您帮助,请为我买一杯饮料吧!以下是我的支付宝,意思一下我将非常感激!
jquery实现2d分页
            
    
    博客分类: 前端技巧算法  
  • jquery实现2d分页
            
    
    博客分类: 前端技巧算法  
  • 大小: 682 KB