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 相关文章推荐
JSON 学习之完全手册 图文
May 29 Javascript
FireFox JavaScript全局Event对象
Jun 14 Javascript
js下关于onmouseout、事件冒泡的问题经验小结
Dec 09 Javascript
怎样在JavaScript里写一个swing把数据插入数据库
Dec 10 Javascript
jQuery文本框(input textare)事件绑定方法教程
Apr 24 Javascript
JavaScript截断字符串的方法
Jul 15 Javascript
JavaScript模块化开发之SeaJS
Dec 13 Javascript
JavaScript常用函数工具集:lao-utils
Mar 01 Javascript
vue中本地静态图片路径写法
Mar 06 Javascript
使用Vue CLI创建typescript项目的方法
Aug 09 Javascript
JS用最简单的方法实现四舍五入
Aug 27 Javascript
JS实现可控制的进度条
Mar 25 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下图片文字混合水印与缩略图实现代码
2009/12/11 PHP
PHP操作数组相关函数
2011/02/03 PHP
解析PHP跨站刷票的实现代码
2013/06/18 PHP
PHP四大安全策略
2014/03/12 PHP
PHP对象链式操作实现原理分析
2016/10/09 PHP
kindeditor 加入七牛云上传的实例讲解
2017/11/12 PHP
详解PHP实现支付宝小程序用户授权的工具类
2018/12/25 PHP
PHP容器类的两种实现方式示例
2019/07/24 PHP
Javascript 表单之间的数据传递代码
2008/12/04 Javascript
javascript 面向对象 function类
2010/05/13 Javascript
在浏览器中获取当前执行的脚本文件名的代码
2011/07/19 Javascript
JavaScript中获取高度和宽度函数总结
2014/10/08 Javascript
轻松创建nodejs服务器(2):nodejs服务器的构成分析
2014/12/18 NodeJs
JavaScript实现弹出子窗口并传值给父窗口
2014/12/18 Javascript
transport.js和jquery冲突问题的解决方法
2015/02/10 Javascript
WEB前端实现裁剪上传图片功能
2016/10/17 Javascript
javascript 实现动态侧边栏实例详解
2016/11/11 Javascript
jQuery事件详解
2017/02/23 Javascript
Bootstrap图片轮播效果详解
2017/10/17 Javascript
Vue组件内部实现一个双向数据绑定的实例代码
2019/04/04 Javascript
vue 项目 iOS WKWebView 加载
2019/04/17 Javascript
vue 实现搜索的结果页面支持全选与取消全选功能
2019/05/10 Javascript
node实现mock-plugin中间件的方法
2019/12/25 Javascript
使用Angular9和TypeScript开发RPG游戏的方法
2020/03/25 Javascript
js实现小球在页面规定的区域运动
2020/06/16 Javascript
js实现从右往左匀速显示图片(无缝轮播)
2020/06/29 Javascript
vue实现点击按钮“查看详情”弹窗展示详情列表操作
2020/09/09 Javascript
python实现查找两个字符串中相同字符并输出的方法
2015/07/11 Python
对pandas中apply函数的用法详解
2018/04/10 Python
Python 中list ,set,dict的大规模查找效率对比详解
2019/10/11 Python
Python获取对象属性的几种方式小结
2020/03/12 Python
计算机实训报告范文
2014/11/05 职场文书
求职自我评价范文
2015/03/09 职场文书
借条格式范本
2015/05/25 职场文书
心理健康教育主题班会
2015/08/13 职场文书
领导干部学习心得体会
2016/01/23 职场文书