炫了一笔的分页技术，动态十足，纯手工打造，无bug(用bootstrap的css样式，jQuery控制动态)。

来源：互联网发布：虹桥天地购物中心 mac 编辑：程序博客网时间：2024/05/01 05:34

效果：

html,css:

毫无疑问首先导入bootstrap的.css,jQuery的js：

 <link href="../../static/css/bootstrap.min.css" rel="stylesheet" type="text/css">

<style>.pagination .pageindex .active a{ background:#666; color:#FFF;}.pagination{ margin:0 auto; width:600px; }.pageindex_start{float:left; width:auto; margin-right:0px;}.pageindex_end{ float:left; width:auto; margin-left:0px;}.pageindex_outter{ width:300px; float:left; overflow:hidden;}.pageindex{ width:1000%; position:relative; left:0px;}.pageindex li a{ width:15px; text-align:center; padding:0px;}</style>

<div class="pagination">//pagination 是 bootstrap中的css样式            <div class="pageindex_start">                    <ul>                         <li><a href="#" id="firstPage">首页</a></li>                          <li><a href="#" id="previous">上一页</a></li>                    </ul>                </div>               <div class="pageindex_outter">                   <ul class="pageindex">                                                                                <li class="active"><a href="#" id="1">1</a></li>                      <li><a href="#" id="2">2</a></li>                      <li><a href="#" id="3">3</a></li>                      <li><a href="#" id="4">4</a></li>                      <li><a href="#" id="5">5</a></li>                      <li><a href="#" id="6">6</a></li>                      <li><a href="#" id="7">7</a></li>                      <li><a href="#" id="8">8</a></li>                      <li><a href="#" id="9">9</a></li>                      <li><a href="#" id="10">10</a></li>                      <li><a href="#" id="11">11</a></li>                      <li><a href="#" id="12">12</a></li>                      <li><a href="#" id="13">13</a></li>                      <li><a href="#" id="14">14</a></li>                      <li><a href="#" id="15">15</a></li>                      <li><a href="#" id="16">16</a></li>                        <li><a href="#" id="17">17</a></li>                      <li><a href="#" id="18">18</a></li>                      <li><a href="#" id="19">19</a></li>                       <li><a href="#" id="20">20</a></li>                                     </ul>              </div>              <div class="pageindex_end">                  <ul>                        <li><a href="#" id="next">下一页</a></li>                      <li><a href="#" id="lastPage">尾页</a></li>                  </ul>              </div> </div>

jQuery:
毫无疑问要使用jQuery必须导入：

<script src="../../static/js/jQuery.1.7.1.min.js"></script>

以下脚本的核心思想：

全局变量：

flag:ul可见区域的第一个li的脚码（可能不准但是差不多），以此来控制ul的left值，实现ul的滚动。

item_index = $(this).attr('id')-1;//过滤器：:eq(index)和:gt(index)和:lt(index)中的index是从0开始的var item_num = parseInt(item_index)-(flag + 4);var itemWidth = $('.pageindex').children('li').outerWidth();var moveFactor = parseInt($('.pageindex').css('left'))-item_num * itemWidth;$('.pageindex').animate({'left':moveFactor},'slow','linear');

item_index：就是a的id值，实现点击a时li添加class '.active'

函数isDisabled（）：实现判断是否可点击即是否到首页或尾页

全部jQuery代码：

 <script type="text/jscript">  $(document).ready(function(){var flag = 0;var item_index = 0;function isDisabled(){if(item_index==0){$('#previous').parent('li').addClass('disabled');$('#firstPage').parent('li').addClass('disabled');}else{$('#previous').parent('li').removeClass('disabled');$('#firstPage').parent('li').removeClass('disabled'); }if(item_index==19){$('#next').parent('li').addClass('disabled');$('#lastPage').parent('li').addClass('disabled');}else{ $('#next').parent('li').removeClass('disabled');$('#lastPage').parent('li').removeClass('disabled');}}isDisabled();$('#next').bind('click',function(e){ if(item_index==19){return false;}flag = flag+1; item_index = item_index+1;$('.pageindex').children('li').removeClass('active');$('.pageindex li:eq('+item_index+')').addClass('active');            var itemWidth = $('.pageindex').children('li').outerWidth();var moveFactor = parseInt($('.pageindex').css('left'))-itemWidth;$('.pageindex').animate({'left':moveFactor},'slow','linear');                isDisabled();                    });$('#previous').bind('click',function(){if(item_index==0){return false;}  flag = flag-1; item_index = item_index-1;$('.pageindex').children('li').removeClass('active');$('.pageindex li:eq('+item_index+')').addClass('active');            var itemWidth = $('.pageindex').children('li').outerWidth();var moveFactor = parseInt($('.pageindex').css('left'))+itemWidth;$('.pageindex').animate({'left':moveFactor},'slow','linear');                isDisabled();                    });$('.pageindex li a').bind('click',function(){item_index = $(this).attr('id')-1;//过滤器：:eq(index)和:gt(index)和:lt(index)中的index是从0开始的if(!$(this).parent('li').hasClass('active')){ $(this).parents('ul').children('li').removeClass('active');$('.pageindex li:eq('+item_index+')').addClass('active');}var item_num = parseInt(item_index)-(flag + 4);var itemWidth = $('.pageindex').children('li').outerWidth();var moveFactor = parseInt($('.pageindex').css('left'))-item_num * itemWidth;$('.pageindex').animate({'left':moveFactor},'slow','linear');isDisabled();flag = item_index-4;});$('#firstPage').click(function(){flag = 0;item_index = 0;$('.pageindex').animate({'left':'0px'},'slow','linear');$('.pageindex li').removeClass('active');$('.pageindex li:eq('+item_index+')').addClass('active');isDisabled();});$('#lastPage').click(function(){flag = 14; item_index = 19;var item_num = '12';var itemWidth = $('.pageindex').children('li').outerWidth();var moveFactor = 0-item_num * itemWidth;$('.pageindex').animate({'left':moveFactor},'slow','linear');$('.pageindex li').removeClass('active');$('.pageindex li:eq('+19+')').addClass('active');isDisabled();});});  </script>

0 0