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 相关文章推荐
javascript parseInt 函数分析(转)
Mar 21 Javascript
JS 日期验证正则附asp日期格式化函数
Sep 11 Javascript
JavaScript 申明函数的三种方法 每个函数就是一个对象(一)
Dec 04 Javascript
捕获键盘事件(且兼容各浏览器)
Jul 03 Javascript
IE下支持文本框和密码框placeholder效果的JQuery插件分享
Jan 31 Javascript
Node.js中的process.nextTick使用实例
Jun 25 Javascript
XML文件转化成NSData对象的方法
Aug 12 Javascript
jQuery实现下拉框多选 jquery-multiselect 的实例代码
Jul 14 Javascript
p5.js入门教程之键盘交互
Mar 19 Javascript
vue tab切换,解决echartst图表宽度只有100px的问题
Jul 19 Javascript
浅谈JS的原型和原型链
Jun 04 Javascript
vue 给数组添加新对象并赋值
Apr 20 Vue.js
牛叉的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 debug 安装技巧
2011/04/30 PHP
php使用环形链表解决约瑟夫问题完整示例
2018/08/07 PHP
javascript的对话框详解与参数
2007/03/08 Javascript
js数组去重的常用方法总结
2014/01/24 Javascript
jQuery中DOM树操作之复制元素的方法
2015/01/23 Javascript
JavaScript闭包详解
2015/02/02 Javascript
js实现刷新iframe的方法汇总
2015/04/27 Javascript
微信js-sdk上传与下载图片接口用法示例
2016/10/12 Javascript
AngularJS学习第二篇 AngularJS依赖注入
2017/02/13 Javascript
详解Vue组件之间的数据通信实例
2017/06/17 Javascript
Angular ElementRef简介及其使用
2018/10/01 Javascript
Vue实现表格批量审核功能实例代码
2019/05/28 Javascript
JavaScript实现简单计算器功能
2019/12/19 Javascript
微信小程序换肤功能实现代码(思路详解)
2020/08/25 Javascript
windows下python模拟鼠标点击和键盘输示例
2014/02/28 Python
详解Python中的序列化与反序列化的使用
2015/06/30 Python
python 信息同时输出到控制台与文件的实例讲解
2018/05/11 Python
python实现可变变量名方法详解
2019/07/01 Python
python3实现往mysql中插入datetime类型的数据
2020/03/02 Python
Python用K-means聚类算法进行客户分群的实现
2020/08/23 Python
美国在线自行车商店:Jenson USA
2018/05/22 全球购物
购买英国原创艺术:Art Gallery
2018/08/25 全球购物
远程调用的原理
2014/07/05 面试题
如何写毕业求职自荐信
2013/11/06 职场文书
金融管理应届生求职信
2014/02/20 职场文书
揭牌仪式主持词
2014/03/19 职场文书
法人委托书范本
2014/04/04 职场文书
大学班级学风建设方案
2014/05/01 职场文书
2014年教师党员公开承诺书
2014/05/28 职场文书
体操比赛口号
2014/06/10 职场文书
售后客服工作职责
2014/06/16 职场文书
新党章心得体会
2014/09/04 职场文书
导游词格式
2015/02/13 职场文书
解决Redis启动警告问题
2022/02/24 Redis
nginx配置指令之server_name的具体使用
2022/08/14 Servers
Python pyecharts案例超市4年数据可视化分析
2022/08/14 Python