首页 > 代码库 > 模仿百度的分页器

模仿百度的分页器

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<style type="text/css">

.aa{width: 50px;height: 50px;border: 1px solid black;margin-right:8px;display: inline-block;text-align: center;line-height: 50px }

.active{border: 0;border-radius:100%;background: green;color:white;font-size: 25px; }


</style>
<script src="http://www.mamicode.com/jquery-1.12.3.min.js"></script>
</head>
<body>


<div id="cc">
<input type="button" value="http://www.mamicode.com/上一页" id="pre">
<span class="aa">1</span>
<span class="aa">2</span>
<span class="aa">3</span>
<span class="aa">4</span>
<span class="aa">5</span>
<span class="aa">6</span>
<span class="aa">7</span>
<span class="aa">8</span>
<span class="aa">9</span>
<span class="aa">10</span>
<input type="button" value="http://www.mamicode.com/下一页" id="next">
</div>
<script type="text/javascript">

$(‘.aa‘).click(function(){
	var activeNum=+$(this).html();
	if(activeNum<=5){
		for(var i=1;i<10;i++){
			$(‘.aa:eq(‘+(i-1)+‘)‘).html(i);	
		}
		$(‘.aa:eq(‘+(activeNum-1)+‘)‘).addClass(‘active‘);
		$(‘.aa:eq(‘+(activeNum-1)+‘)‘).siblings(‘span‘).addClass(‘aa‘).removeClass(‘active‘);
	}
	var ac=activeNum;
	if(activeNum>=6){
		$(‘.aa:eq(5)‘).html(activeNum).addClass(‘active‘).siblings(‘span‘).addClass(‘aa‘).removeClass(‘active‘);
		for(var i=5;i>=0;i--){
			$(‘.aa:eq(‘+i+‘)‘).html(ac--);	
		}
		var bc=activeNum+1;
		for(var i=1;i<=4;i++){
			var y=5+i;
			$(‘.aa:eq(‘+y+‘)‘).html(bc++);	
		}
	}
})


$(‘#next‘).click(function(){
	var activeNum= +"10";
	if($(‘#cc span‘).hasClass(‘active‘)){
		activeNum=+$(‘.active‘).html()+1;
		
	}
	//alert(activeNum)
		
	
	//var activeNum=+$(this).html()+1;
	if(activeNum<=5){
		for(var i=1;i<10;i++){
			$(‘.aa:eq(‘+(i-1)+‘)‘).html(i);	
		}
		$(‘.aa:eq(‘+(activeNum-1)+‘)‘).addClass(‘active‘);
		$(‘.aa:eq(‘+(activeNum-1)+‘)‘).siblings(‘span‘).addClass(‘aa‘).removeClass(‘active‘);
	}
	var ac=activeNum;
	if(activeNum>=6){
		$(‘.aa:eq(5)‘).html(activeNum).addClass(‘active‘).siblings(‘span‘).addClass(‘aa‘).removeClass(‘active‘);
		for(var i=5;i>=0;i--){
			$(‘.aa:eq(‘+i+‘)‘).html(ac--);	
		}
		var bc=activeNum+1;
		for(var i=1;i<=4;i++){
			var y=5+i;
			$(‘.aa:eq(‘+y+‘)‘).html(bc++);	
		}
	}
})




$(‘#pre‘).click(function(){
	var activeNum= +"1";
	if($(‘#cc span‘).hasClass(‘active‘)){
		activeNum=+$(‘.active‘).html()-1;
		
	}
	//alert(activeNum)
		
	
	//var activeNum=+$(this).html()+1;
	if(activeNum<=5){
		for(var i=1;i<10;i++){
			$(‘.aa:eq(‘+(i-1)+‘)‘).html(i);	
		}
		$(‘.aa:eq(‘+(activeNum-1)+‘)‘).addClass(‘active‘);
		$(‘.aa:eq(‘+(activeNum-1)+‘)‘).siblings(‘span‘).addClass(‘aa‘).removeClass(‘active‘);
	}
	var ac=activeNum;
	if(activeNum>=6){
		$(‘.aa:eq(5)‘).html(activeNum).addClass(‘active‘).siblings(‘span‘).addClass(‘aa‘).removeClass(‘active‘);
		for(var i=5;i>=0;i--){
			$(‘.aa:eq(‘+i+‘)‘).html(ac--);	
		}
		var bc=activeNum+1;
		for(var i=1;i<=4;i++){
			var y=5+i;
			$(‘.aa:eq(‘+y+‘)‘).html(bc++);	
		}
	}
})

</script>

</body>
</html>

  

模仿百度的分页器