jQuery实现仿腾讯视频列表分页效果的方法


Posted in Javascript onAugust 07, 2015

本文实例讲述了jQuery实现仿腾讯视频列表分页效果的方法。分享给大家供大家参考。具体如下:

这里使用jQuery仿腾讯视频列表分页效果,无刷新分页特效,点击分页按钮,无刷新进入下一页内容列表。

运行效果截图如下:

jQuery实现仿腾讯视频列表分页效果的方法

具体代码如下:

<!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>

希望本文所述对大家的jquery程序设计有所帮助。

Javascript 相关文章推荐
prototype class详解
Sep 07 Javascript
JQuery设置和去除disabled属性的5种方法总结
May 16 Javascript
js字母大小写转换实现方法总结
Nov 13 Javascript
jquery使用each方法遍历json格式数据实例
May 18 Javascript
JavaScript原型及原型链终极详解
Jan 04 Javascript
AngularJS 单元测试(一)详解
Sep 21 Javascript
Ajax 加载数据 练习代码
Jan 05 Javascript
原生js实现简单的焦点图效果实例
Dec 14 Javascript
angular实现页面打印局部功能的思考与方法
Apr 13 Javascript
JavaScript函数的特性与应用实践深入详解
Dec 30 Javascript
原生JS实现留言板
Mar 26 Javascript
Flexible.js可伸缩布局实现方法详解
Nov 13 Javascript
jQuery使用animate创建动画用法实例
Aug 07 #Javascript
浅谈JavaScript 的执行顺序
Aug 07 #Javascript
javascript封装 Cookie 应用接口
Aug 07 #Javascript
jQuery实现鼠标经过弹出提示信息的地图热点效果
Aug 07 #Javascript
jQuery与getJson结合的用法实例
Aug 07 #Javascript
《JavaScript函数式编程》读后感
Aug 07 #Javascript
jQuery过滤HTML标签并高亮显示关键字的方法
Aug 07 #Javascript
You might like
实现树状结构的两种方法
2006/10/09 PHP
php不用内置函数对数组排序的两个算法代码
2010/02/08 PHP
ThinkPHP实现转换数据库查询结果数据到对应类型的方法
2017/11/16 PHP
一步一步教你写一个jQuery的插件教程(Plugin)
2009/09/03 Javascript
javascript中callee与caller的用法和应用场景
2010/12/08 Javascript
详解Jquery实现ready和bind事件
2016/04/14 Javascript
bootstrap学习笔记之初识bootstrap
2016/06/21 Javascript
jQuery实现的分页功能示例
2017/01/22 Javascript
深入理解vue路由的使用
2017/03/24 Javascript
Vue filters过滤器的使用方法
2017/07/14 Javascript
如何抽象一个Vue公共组件
2017/10/17 Javascript
Angular5.1新功能分享
2017/12/21 Javascript
vue项目部署上线遇到的问题及解决方法
2018/06/10 Javascript
3分钟读懂移动端rem使用方法(推荐)
2019/05/06 Javascript
es6数组的flat(),flatMap()函数用法实例分析
2020/04/18 Javascript
Vue项目打包部署到apache服务器的方法步骤
2021/02/01 Vue.js
[55:04]海涛DOTA2死魂复燃6.82版本介绍
2014/09/28 DOTA
Python Property属性的2种用法
2015/06/21 Python
Python编程给numpy矩阵添加一列方法示例
2017/12/04 Python
Python字典操作详细介绍及字典内建方法分享
2018/01/04 Python
Python数字图像处理之霍夫线变换实现详解
2018/01/12 Python
解决Python一行输出不显示的问题
2018/12/03 Python
Python实现查找最小的k个数示例【两种解法】
2019/01/08 Python
python在新的图片窗口显示图片(图像)的方法
2019/07/11 Python
python+openCV调用摄像头拍摄和处理图片的实现
2019/08/06 Python
对Tensorflow中Device实例的生成和管理详解
2020/02/04 Python
Django 实现 Websocket 广播、点对点发送消息的代码
2020/06/03 Python
美国著名的婴儿学步鞋老品牌:Robeez
2016/08/20 全球购物
《小白兔和小灰兔》教学反思
2014/02/18 职场文书
旅游活动总结
2014/08/27 职场文书
治庸问责心得体会
2014/09/12 职场文书
校园新闻广播稿5篇
2014/10/10 职场文书
2015年保安个人工作总结
2015/04/02 职场文书
如何书写公司员工保密协议?
2019/06/27 职场文书
创业计划之特色精品店
2019/08/12 职场文书
写作之关于描写老人的好段摘抄
2019/11/14 职场文书