zoukankan      html  css  js  c++  java
  • 模仿百度的分页器

    <%@ 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{ 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="jquery-1.12.3.min.js"></script>
    </head>
    <body>
    
    
    <div id="cc">
    <input type="button" value="上一页" 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="下一页" 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>
    

      

  • 相关阅读:
    x64 寄存器使用
    汇编语言学习笔记(十二)-浮点指令----ACM
    浮点数的加减计算总结
    Mobile First! Wijmo 5 之 架构
    CSDN头版头条 《近匠》 Wijmo 5 CTO:从Web到移动,我的25年编程生涯
    超越Web,Javascript在物联网的应用
    《我与葡萄城的故事》— 征文大赛
    介绍一款开源的类Excel电子表格软件
    2014年GDG西安 -- DevFest Season1
    异步陷阱之死锁篇
  • 原文地址:https://www.cnblogs.com/liuhao-web/p/6394769.html
Copyright © 2011-2022 走看看