cari

Rumah >hujung hadapan web >tutorial js >Kod kesan paging pseudo dilaksanakan oleh jquery_jquery

Kod kesan paging pseudo dilaksanakan oleh jquery_jquery

WBOY
WBOYasal
2016-05-16 15:34:411302semak imbas

Contoh dalam artikel ini menerangkan kod kesan paging pseudo yang dilaksanakan oleh jquery. Kongsikan dengan semua orang untuk rujukan anda, butirannya adalah seperti berikut:

Kesan pseudo-penomboran jquery yang diperkenalkan di sini berfungsi dengan sempurna di bawah Firefox. Terdapat beberapa masalah di bawah keseluruhan siri IE Pemalam jQuery1.7.2 telah diperkenalkan sangat membantu untuk mempelajari jQuery, saya berharap semua orang memberi tumpuan.

Tangkapan skrin kesan berjalan adalah seperti berikut:

Alamat demo dalam talian adalah seperti berikut:

http://demo.jb51.net/js/2015/jquery-pic-mn-page-style-codes/

Kod khusus adalah seperti berikut: 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jquery伪分页效果</title>
<script src="js/jquery-1.7.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
 $(document).ready(function(){
   $("ul li:gt(3)").hide();//初始化，前面4条数据显示，其他的数据隐藏。
   var total_q=$("ul li").index()+1;//总数据
   var current_page=4;//每页显示的数据
   var current_num=1;//当前页数
   var total_page= Math.round(total_q/current_page);//总页数 
   var next=$(".next");//下一页
   var prev=$(".prev");//上一页
   $(".total").text(total_page);//显示总页数
   $(".current_page").text(current_num);//当前的页数
   //下一页
   $(".next").click(function(){
    if(current_num==7){
      return false;//如果大于总页数就禁用下一页
     }
     else{
      $(".current_page").text(++current_num);//点击下一页的时候当前页数的值就加1
      $.each($('ul li'),function(index,item){
       var start = current_page* (current_num-1);//起始范围
       var end = current_page * current_num;//结束范围
       if(index >= start && index < end){//如果索引值是在start和end之间的元素就显示，否则就隐
        $(this).show();
       }else {
        $(this).hide(); 
       }
      });
     }
   });
   //上一页方法
   $(".prev").click(function(){
     if(current_num==1){
      return false;
     }else{
      $(".current_page").text(--current_num);
      $.each($('ul li'),function(index,item){
       var start = current_page* (current_num-1);//起始范围
       var end = current_page * current_num;//结束范围
       if(index >= start && index < end){//如果索引值是start和end之间的元素就显示，否则就隐藏
        $(this).show();
       }else {
        $(this).hide(); 
       }
      });  
     }
    })
 })
</script>
<style type="text/css">
 .main{width:800px;zoom:1;margin:0 auto;}
 .item{width:800px;overflow:hidden;}
 ul{padding:0;width:860px;zoom:1;}
 .clear{zoom:1;}
 .clear:after{content:"";display:block;height:0;clear:both;visibility:hidden;}
 ul li{list-style-type:none;float:left;background:#F69;font-size:60px;text-shadow:1px 1px 3px #555;width:380px;height:200px;margin:10px 40px 10px 0;line-height:200px;text-align:center;color:#fff;}
 .page_btn{padding-top:20px;}
 .page_btn a{cursor:pointer;padding:5px;border:solid 1px #ccc;font-size:12px;}
 .page_box{float:right;}
 .num{padding:0 10px;}
</style>
</head>
<body>
 <div class="main">
  <div class="item">
   <ul class="clear">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
    <li>8</li>
    <li>9</li>
    <li>10</li>
    <li>11</li>
    <li>12</li>
    <li>13</li>
    <li>14</li>
    <li>15</li>
    <li>16</li>
    <li>17</li>
    <li>18</li>
    <li>19</li>
    <li>20</li>
    <li>21</li>
    <li>22</li>
    <li>23</li>
    <li>24</li>
    <li>25</li>
    <li>26</li>
    <li>27</li>
    <li>28</li>
   </ul>
  </div>
  <div class="page_btn clear">
   <span class="page_box">
    <a class="prev">上一页</a><span class="num"><span class="current_page">1</span><span style="padding:0 3px;">/</span><span class="total"></span></span><a class="next">下一页</a>
   </span>
  </div>
 </div><!--main-->
</body>
</html>

Saya harap artikel ini akan membantu semua orang dalam pengaturcaraan jQuery.

Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：Kawalan paging jquery DIY (sangat mudah dan praktikal)_jqueryArtikel seterusnya：Kawalan paging jquery DIY (sangat mudah dan praktikal)_jquery

Artikel berkaitan

Lihat lagi