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 相关文章推荐
Mootools 1.2教程(2) DOM选择器
Sep 14 Javascript
javascript textarea光标定位方法(兼容IE和FF)
Mar 12 Javascript
Javascript的常规数组和关联数组对比小结
May 24 Javascript
使用PHP+JQuery+Ajax分页的实现
Apr 23 Javascript
JavaScript获取和设置CheckBox状态的简单方法
Jul 05 Javascript
JQuery.get提交页面不跳转的解决方法
Jan 13 Javascript
JavaScript中的getTime()方法使用详解
Jun 10 Javascript
JS实现动态表格的添加,修改,删除功能(推荐)
Jun 15 Javascript
深入理解Javascript箭头函数中的this
Feb 13 Javascript
JS实现的DOM插入节点操作示例
Apr 04 Javascript
解决微信小程序中的滚动穿透问题
Sep 16 Javascript
JQuery使用属性addClass、removeClass和toggleClass实现增加和删除类操作示例
Nov 18 jQuery
牛叉的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
cmd下运行php脚本
2008/11/25 PHP
在PHP中检查PHP文件是否有语法错误的方法
2009/12/23 PHP
PHP输出英文时间日期的安全方法(RFC 1123格式)
2014/06/13 PHP
PHP判断JSON对象是否存在的方法(推荐)
2016/07/06 PHP
Yii2框架实现注册和登录教程
2016/09/30 PHP
实例讲解PHP验证邮箱是否合格
2019/01/28 PHP
PHP实现cookie跨域session共享的方法分析
2019/08/23 PHP
使用js Math.random()函数生成n到m间的随机数字
2014/10/09 Javascript
Javascript检查图片大小不要让大图片撑破页面
2014/11/04 Javascript
JavaScript类继承及实例化的方法
2015/07/25 Javascript
js select实现省市区联动选择
2020/04/17 Javascript
jQuery访问浏览器本地存储cookie、localStorage和sessionStorage的基本用法
2017/10/20 jQuery
vue综合组件间的通信详解
2017/11/06 Javascript
vue中实现methods一个方法调用另外一个方法
2018/02/08 Javascript
小程序实现左右来回滚动字幕效果
2018/12/28 Javascript
基于elementUI使用v-model实现经纬度输入的vue组件
2019/05/12 Javascript
node.js处理前端提交的GET请求
2019/08/30 Javascript
Vue中rem与postcss-pxtorem的应用详解
2019/11/20 Javascript
Python实现感知机(PLA)算法
2017/12/20 Python
Flask实现跨域请求的处理方法
2018/09/27 Python
python取数作为临时极大值(极小值)的方法
2018/10/15 Python
使用Python3+PyQT5+Pyserial 实现简单的串口工具方法
2019/02/13 Python
python顺序执行多个py文件的方法
2019/06/29 Python
Python中的四种交换数值的方法解析
2019/11/18 Python
Windows下python3安装tkinter的问题及解决方法
2020/01/06 Python
Python内置类型性能分析过程实例
2020/01/29 Python
新员工欢迎词
2014/01/12 职场文书
酒店个人求职信范文
2014/01/25 职场文书
公证委托书大全
2014/04/04 职场文书
工地宣传标语
2014/06/18 职场文书
促销活动总结怎么写
2014/06/25 职场文书
中级会计大学生职业生涯规划书
2014/09/16 职场文书
个人委托书如何写
2014/09/25 职场文书
安全教育的主题班会
2015/08/13 职场文书
redis 查看所有的key方式
2021/05/07 Redis
Redis配置外网可访问(redis远程连接不上)的方法
2022/12/24 Redis