cari

Rumah >hujung hadapan web >tutorial js >Bagaimana untuk melaksanakan jQuery meniru Tencent senarai video paging effect_jquery

Bagaimana untuk melaksanakan jQuery meniru Tencent senarai video paging effect_jquery

WBOY
WBOYasal
2016-05-16 15:46:241691semak imbas

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>

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

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：Javascript HTML5 Canvas melaksanakan kemahiran animasi effect_javascript basikal LabArtikel seterusnya：Javascript HTML5 Canvas melaksanakan kemahiran animasi effect_javascript basikal Lab

Artikel berkaitan

Lihat lagi