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 相关文章推荐
javascript控制frame,iframe的src属性代码
Dec 31 Javascript
善用事件代理,警惕闭包的性能陷阱。
Jan 20 Javascript
JavaScript建立一个语法高亮输入框实现思路
Feb 26 Javascript
jquery+css+ul模拟列表菜单具体实现思路
Apr 15 Javascript
JS自定义功能函数实现动态添加网址参数修改网址参数值
Aug 02 Javascript
js检测浏览器版本、核心、是否移动端示例
Apr 24 Javascript
JavaScript中的object转换成number或string规则介绍
Dec 31 Javascript
深入理解Javascript中的自执行匿名函数
Jun 03 Javascript
bootstrap 下拉多选框进行多选传值问题代码分析
Feb 14 Javascript
vue.js从安装到搭建过程详解
Mar 17 Javascript
Mint UI 基于 Vue.js 移动端组件库
Nov 07 Javascript
element-ui循环显示radio控件信息的方法
Aug 24 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
PHP实现取得HTTP请求的原文
2014/08/18 PHP
php检测apache mod_rewrite模块是否安装的方法
2015/03/14 PHP
php use和include区别总结
2019/10/13 PHP
JQuery调webservice实现邮箱验证(检测是否可用)
2013/05/21 Javascript
对frameset、frame、iframe的js操作示例代码
2013/08/16 Javascript
Jquery 在页面加载后执行的几种方式
2014/03/14 Javascript
JavaScript实现更改网页背景与字体颜色的方法
2015/02/02 Javascript
js实现登录验证码
2016/12/22 Javascript
Javascript 使用ajax与C#获取文件大小实例详解
2017/01/13 Javascript
JS表单验证方法实例小结【电话、身份证号、Email、中文、特殊字符、身份证号等】
2017/02/14 Javascript
彻底解决 webpack 打包文件体积过大问题
2017/07/07 Javascript
vue的状态管理模式vuex
2017/11/30 Javascript
React-native桥接Android原生开发详解
2018/01/17 Javascript
ng-events类似ionic中Events的angular全局事件
2018/09/05 Javascript
p5.js实现简单货车运动动画
2019/10/23 Javascript
vue 解决异步数据更新问题
2019/10/29 Javascript
uni-app 支持多端第三方地图定位的方法
2020/01/03 Javascript
JS数组的常用10种方法详解
2020/05/08 Javascript
对python打乱数据集中X,y标签对的方法详解
2018/12/14 Python
对python 调用类属性的方法详解
2019/07/02 Python
利用Python实现手机短信监控通知的方法
2019/07/22 Python
python实现两个一维列表合并成一个二维列表
2019/12/02 Python
Python函数参数类型及排序原理总结
2019/12/19 Python
python网络编程:socketserver的基本使用方法实例分析
2020/04/09 Python
python中pyqtgraph知识点总结
2021/01/26 Python
CSS3 mask 遮罩的具体使用方法
2017/11/03 HTML / CSS
澳大利亚波希米亚风时尚品牌:Tree of Life
2019/09/15 全球购物
介绍下Java的输入输出流
2014/01/22 面试题
装潢设计实习自我鉴定
2013/09/19 职场文书
村长贪污检举信
2014/04/04 职场文书
环保倡议书300字
2014/05/15 职场文书
2014年学习委员工作总结
2014/11/14 职场文书
五年级小学生评语
2014/12/26 职场文书
神龙架导游词
2015/02/11 职场文书
2015年社区重阳节活动总结
2015/07/30 职场文书
奖学金申请个人主要事迹材料
2015/11/04 职场文书