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 相关文章推荐
seajs中模块的解析规则详解和模块使用总结
Mar 12 Javascript
简介JavaScript中setUTCSeconds()方法的使用
Jun 12 Javascript
使用纯JS代码判断字符串中有多少汉字的实现方法(超简单实用)
Nov 12 Javascript
js与jquery分别实现tab标签页功能的方法
Nov 18 Javascript
Vue表单验证插件Vue Validator使用方法详解
Apr 07 Javascript
使用bootstrap插件实现模态框效果
May 10 Javascript
微信小程序之多文件下载的简单封装示例
Jan 29 Javascript
vue toggle做一个点击切换class(实例讲解)
Mar 13 Javascript
vue中使用heatmapjs的示例代码(结合百度地图)
Sep 05 Javascript
实现一个 Vue 吸顶锚点组件方法
Jul 10 Javascript
Vue CLI3移动端适配(px2rem或postcss-plugin-px2rem)
Apr 27 Javascript
在vant中使用时间选择器和popup弹出层的操作
Nov 04 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
ThinkPHP与PHPExcel冲突解决方法
2011/08/08 PHP
php5.3以后的版本连接sqlserver2000的方法
2014/07/28 PHP
纯CSS打造的导航菜单(附jquery版)
2010/08/07 Javascript
快速解决FusionCharts联动的中文乱码问题
2013/12/04 Javascript
用javascript对一个json数组深度赋值示例
2014/07/27 Javascript
jQuery实现高亮显示的方法
2015/03/10 Javascript
Express的路由详解
2015/12/10 Javascript
JQuery插件Marquee.js实现无缝滚动效果
2016/04/26 Javascript
概述jQuery中的ajax方法
2016/12/16 Javascript
DWR3 访问WEB元素的两种方法实例详解
2017/01/03 Javascript
利用js查找数组中指定元素并返回该元素的所有索引示例
2017/03/29 Javascript
vue 使用element-ui中的Notification自定义按钮并实现关闭功能及如何处理多个通知
2019/08/17 Javascript
vue 使用饿了么UI仿写teambition的筛选功能
2021/03/01 Vue.js
[50:04]DOTA2上海特级锦标赛D组小组赛#2 Liquid VS VP第二局
2016/02/28 DOTA
python打开网页和暂停实例
2014/09/30 Python
以windows service方式运行Python程序的方法
2015/06/03 Python
Python Flask-web表单使用详解
2017/11/18 Python
Python 解析pymysql模块操作数据库的方法
2020/02/18 Python
Python celery原理及运行流程解析
2020/06/13 Python
python实现图像外边界跟踪操作
2020/07/13 Python
Python导入父文件夹中模块并读取当前文件夹内的资源
2020/11/19 Python
HTML5 3D衣服摇摆动画特效
2016/03/17 HTML / CSS
印度尼西亚最好的小工具在线商店:Erafone.com
2019/03/26 全球购物
微软加拿大官方网站:Microsoft Canada
2019/04/28 全球购物
运动会800米加油稿
2014/02/22 职场文书
公务员更新知识培训实施方案
2014/03/31 职场文书
勾股定理课后反思
2014/04/26 职场文书
学校运动会霸气口号
2014/06/07 职场文书
2014年物业公司工作总结
2014/11/22 职场文书
2014年医务科工作总结
2014/12/18 职场文书
2015年幼儿园中班开学寄语
2015/05/27 职场文书
党员转正党支部意见
2015/06/02 职场文书
鲁滨逊漂流记读书笔记
2015/06/26 职场文书
母亲节感言
2015/08/03 职场文书
mysql 8.0.24 安装配置方法图文教程
2021/05/12 MySQL
MySQL中IO问题的深入分析与优化
2022/04/02 MySQL