jquery实现的伪分页效果代码


Posted in Javascript onOctober 29, 2015

本文实例讲述了jquery实现的伪分页效果代码。分享给大家供大家参考,具体如下:

这里介绍的jquery伪分页效果,在火狐下表现完美,IE全系列下有些问题,引入了jQuery1.7.2插件,代码里有丰富的注释,相信对学习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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jquery伪分页效果</title>
<script src="js/jquery-1.7.2.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>
<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>
</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><!--main-->
</body>
</html>

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

Javascript 相关文章推荐
jquery做的一个简单的屏幕锁定提示框
Mar 26 Javascript
javascript等号运算符使用详解
Apr 16 Javascript
微信支付如何实现内置浏览器的H5页面支付
Sep 25 Javascript
jquery实现手风琴效果
Nov 20 Javascript
javascript的几种继承方法介绍
Mar 22 Javascript
Bootstrap和Java分页实例第一篇
Dec 23 Javascript
jQuery DateTimePicker 日期和时间插件示例
Jan 22 Javascript
javascript数据结构之串的概念与用法分析
Apr 12 Javascript
深入理解Vue transition源码分析
Jul 30 Javascript
Vue实战教程之仿肯德基宅急送App
Jul 19 Javascript
Vue路由前后端设计总结
Aug 06 Javascript
vuex实现像调用模板方法一样调用Mutations方法
Nov 06 Javascript
牛叉的Jquery——Jquery与DOM对象的互相转换及DOM的三种操作
Oct 29 #Javascript
jquery实现模拟百分比进度条渐变效果代码
Oct 29 #Javascript
JS模拟酷狗音乐播放器收缩折叠关闭效果代码
Oct 29 #Javascript
如何根据百度地图计算出两地之间的驾驶距离(两种语言js和C#)
Oct 29 #Javascript
JS实现网页右侧带动画效果的伸缩窗口代码
Oct 29 #Javascript
JavaScript操作URL的相关内容集锦
Oct 29 #Javascript
js实现完美兼容各大浏览器的人民币大小写相互转换
Oct 29 #Javascript
You might like
PHP中使用gettext来支持多语言的方法
2011/05/02 PHP
用javascript实现页面打印的三种方法
2007/03/05 Javascript
js 实现复制到粘贴板的功能代码
2010/05/13 Javascript
一个简单的jquery的多选下拉框(自写)
2014/05/05 Javascript
chrome下jq width()方法取值为0的解决方法
2014/05/26 Javascript
修复bash漏洞的shell脚本分享
2014/12/31 Javascript
jQuery实现按键盘方向键翻页特效
2015/03/18 Javascript
jquery制作多功能轮播图插件
2015/04/02 Javascript
实践中学习AngularJS表单
2016/03/21 Javascript
浅析Bootstrap验证控件的使用
2016/06/23 Javascript
jQuery autoComplete插件两种使用方式及动态改变参数值的方法详解
2016/10/24 Javascript
JavaScript编写一个贪吃蛇游戏
2017/03/09 Javascript
11个Javascript小技巧帮你提升代码质量(小结)
2020/12/28 Javascript
[01:02:48]2018DOTA2亚洲邀请赛 4.1 小组赛 A组 LGD vs OG
2018/04/02 DOTA
[56:46]Liquid vs IG 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/18 DOTA
跟老齐学Python之一个免费的实验室
2014/09/14 Python
Python的for和break循环结构中使用else语句的技巧
2016/05/24 Python
Python编程实现使用线性回归预测数据
2017/12/07 Python
Python实现Kmeans聚类算法
2020/06/10 Python
Python3.5.3下配置opencv3.2.0的操作方法
2018/04/02 Python
对pandas读取中文unicode的csv和添加行标题的方法详解
2018/12/12 Python
python画图——实现在图上标注上具体数值的方法
2019/07/08 Python
python使用sklearn实现决策树的方法示例
2019/09/12 Python
如何实现更换Jupyter Notebook内核Python版本
2020/05/18 Python
Python request中文乱码问题解决方案
2020/09/17 Python
使用PyCharm官方中文语言包汉化PyCharm
2020/11/18 Python
CSS3属性使网站设计增强同时不消弱可用性
2009/08/29 HTML / CSS
医院护理人员的自我评价分享
2013/10/04 职场文书
门卫岗位职责
2013/11/15 职场文书
房地产销售经理岗位职责
2014/01/01 职场文书
《一个小村庄的故事》教学反思
2014/04/13 职场文书
新闻学专业职业生涯规划范文:我的人生我做主
2014/09/12 职场文书
党建工作汇报材料
2014/12/24 职场文书
考研英语复习计划
2015/01/19 职场文书
小学三年级数学教学反思
2016/02/16 职场文书
OpenCV实现常见的四种图像几何变换
2022/04/01 Python