Bagaimana untuk melaksanakan jQuery meniru Tencent senarai video paging effect

Bagaimana untuk melaksanakan jQuery meniru Tencent senarai video paging effect_jquery

WBOY

Lepaskan： 2016-05-16 15:46:24

asal

1697 orang telah melayarinya

Contoh dalam artikel ini menerangkan cara jQuery boleh mencapai kesan halaman senarai video Tencent. Kongsikan dengan semua orang untuk rujukan anda. Butirannya adalah seperti berikut:

JQuery digunakan di sini untuk meniru kesan paging senarai video Tencent, tanpa menyegarkan kesan paging Klik butang paging untuk memasuki senarai kandungan halaman seterusnya tanpa menyegarkan.

Tangkapan skrin kesan berjalan adalah seperti berikut:

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>
<title>仿腾讯视频列表分页效果</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<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>
<script src="jquery-1.7.1.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>
</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>
</body>
</html>

Salin selepas log masuk

Saya harap artikel ini akan membantu reka bentuk pengaturcaraan jquery semua orang.