首页 > 代码库 > 模仿百度的分页器
模仿百度的分页器
<%@ 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>
模仿百度的分页器
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。