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 面向对象 对象(Object)
May 13 Javascript
jQuery的.live()和.die() 使用介绍
Sep 10 Javascript
idTabs基于JQuery的根据URL参数选择Tab插件
Apr 11 Javascript
用jquery生成二级菜单的实例代码
Jun 24 Javascript
jQuery插件Tooltipster实现漂亮的工具提示
Apr 12 Javascript
JavaScript知识点总结(十六)之Javascript闭包(Closure)代码详解
May 31 Javascript
Three.js学习之文字形状及自定义形状
Aug 01 Javascript
Bootstrap中表单控件状态(验证状态)
Aug 04 Javascript
js鼠标经过tab选项卡时实现切换延迟
Mar 24 Javascript
jquery+php后台实现省市区联动功能示例
May 23 jQuery
javascript递归函数定义和用法示例分析
Jul 22 Javascript
Vuex实现简单购物车
Jan 10 Vue.js
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十六进制颜色随机生成器功能示例
2017/07/24 PHP
Javascript+XMLHttpRequest+asp.net无刷新读取数据库数据
2009/08/09 Javascript
图像替换新技术 状态域方法
2010/01/28 Javascript
js操作时间(年-月-日 时-分-秒 星期几)
2010/06/20 Javascript
zeroclipboard复制到剪切板的flash
2010/08/04 Javascript
js获取RadioButtonList的Value/Text及选中值等信息实现代码
2013/03/05 Javascript
JS关闭窗口与JS关闭页面的几种方法小结
2013/12/17 Javascript
关闭时刷新父窗口两种方法
2014/05/07 Javascript
js判断元素是否隐藏的方法
2014/06/09 Javascript
node.js中的events.emitter.removeAllListeners方法使用说明
2014/12/10 Javascript
jQuery.holdReady()方法用法实例
2014/12/27 Javascript
jquery中change()用法实例分析
2015/02/06 Javascript
jQuery实现复选框成对选择及对应取消的方法
2015/03/03 Javascript
JavaScript、tab切换完整版(自动切换、鼠标移入停止、移开运行)
2016/01/05 Javascript
jQuery组件easyui对话框实现代码
2016/08/25 Javascript
JavaScript奇技淫巧44招【实用】
2016/12/11 Javascript
11个教程中不常被提及的JavaScript小技巧(推荐)
2019/04/17 Javascript
layui switch 开关监听 弹出确定状态转换的例子
2019/09/21 Javascript
vue3.0 加载json的方法(非ajax)
2020/10/26 Javascript
vue编写简单的购物车功能
2021/01/08 Vue.js
[42:35]2018DOTA2亚洲邀请赛3月30日 小组赛A组 VG VS OpTic
2018/03/31 DOTA
Python获取当前时间的方法
2014/01/14 Python
通过Python扫描代码关键字并进行预警的实现方法
2020/05/24 Python
详解pyqt5的UI中嵌入matplotlib图形并实时刷新(挖坑和填坑)
2020/08/07 Python
台湾最大银发乐活百货:乐龄网
2018/05/21 全球购物
中间件分为哪几类
2012/03/14 面试题
金融专业个人的自我评价
2013/10/18 职场文书
个人授权委托书范文
2014/09/21 职场文书
精神文明建设先进个人事迹材料
2014/12/24 职场文书
先进人物事迹材料
2014/12/29 职场文书
反邪教观后感
2015/06/11 职场文书
幼儿园庆六一主持词
2015/06/30 职场文书
正能量励志演讲稿三分钟(范文)
2019/07/11 职场文书
Go语言切片前或中间插入项与内置copy()函数详解
2021/04/27 Golang
警用民用对讲机找不同
2022/02/18 无线电
Java并发编程之原子性-Atomic的使用
2022/03/16 Java/Android