JavaScript实现分页效果


Posted in Javascript onMarch 28, 2017

效果图:

JavaScript实现分页效果

代码如下:

<html>
 <head>
  <style>
   *{padding:0;margin:0}
   ul,li{list-style:none}
   .left{float:left}
   .right{float:left}
   .page_container{height: 30px; line-height: 30px;width: 510px;overflow: hidden;text-align: center;padding: 30px 0;color: #757575;}
   .page_num_container{width: 301px;margin:0 10px;border:1px solid #ccc; border-right:0;box-sizing: border-box;overflow: hidden;position: relative;height: 32px;}
   .page_num_container ul{position: absolute;top: 0;}
   .page_num_container ul li{float: left;width: 30px;border-right:1px solid #ccc ;box-sizing: border-box;text-align: center;cursor: pointer;}
   .page_num_container ul li:hover,.page_num_container ul li.active{ background: #f4a100;color: #fff;}
   .page_btn{width: 60px;border:1px solid #ccc;box-sizing: border-box;cursor: pointer;}
   .page_btn:hover{ background: #f4a100;color: #fff;}
   .all_page:hover{background:none;color: #757575;}
   .prev_btn{margin-right: 10px;}
  </style>
  <script src="http://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
 </head>
<body>
<!--页码-->
 <div class="page_container center">
  <div class="page_btn prev_page left">上一页</div>
  <div class="page_num_container left" id="page_num_container">
  <ul>
  <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>
  </ul>
  </div>
  <div class="page_btn next_page left">下一页</div>
  <div class="page_btn all_page right">共21页</div>
 </div>
 <!--页码-->
 <script>
  function page(){
  var contain=$(".page_num_container");
  var ul= contain.children("ul");
  var li = ul.children("li");
  var length= li.length;
  var index=0;
  var leftIndex=0;
  var prev_btn= contain.siblings(".prev_page");
  var next_btn= contain.siblings(".next_page ");
  ul.css("width",li.outerWidth()*length);
  change_page(index);
  function change_page(eqindex){
  if(eqindex<0 )
  {
  index=0;
  }
  else if(eqindex>=length ){
  index=length-1;
  }
  if(index-4<=0){
  leftIndex=0;
  }
  else if(index>length-10)
  {
  leftIndex=Math.ceil(length/2);
  }
  else{
  leftIndex=index-4;
  }
  ul.animate({"left":"-"+leftIndex*li.outerWidth()+"px"},200);
  li.eq(index).addClass("active").siblings(li).removeClass("active");
  }
  prev_btn.click(function(){
  index=index-1;
  change_page(index);
  })
  next_btn.click(function(){
  index=index+1;
  change_page(index);
  })
  li.click(function(){
  index=$(this).index();
  change_page(index);
  })
 }
 page()
  </script>
 </body>
</html>

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持三水点靠木!

Javascript 相关文章推荐
可以用鼠标拖动的DIV实现思路及代码
Oct 21 Javascript
js数值计算时使用parseInt进行数据类型转换(jquery)
Oct 07 Javascript
Javascript调用函数方法的几种方式介绍
Mar 20 Javascript
js实现prototype扩展的方法(字符串,日期,数组扩展)
Jan 14 Javascript
jQuery遍历DOM的父级元素、子级元素和同级元素的方法总结
Jul 07 Javascript
微信小程序  modal详解及实例代码
Nov 09 Javascript
JQuery和HTML5 Canvas实现弹幕效果
Jan 04 Javascript
js省市区级联查询(插件版&amp;无插件版)
Mar 21 Javascript
bootstrap table服务端实现分页效果
Aug 10 Javascript
微信小程序request请求后台接口php的实例详解
Sep 20 Javascript
Vue隐藏显示、只读实例代码
Jul 18 Javascript
7个好用的JavaScript技巧分享(译)
May 07 Javascript
Node.js设置CORS跨域请求中多域名白名单的方法
Mar 28 #Javascript
TypeScript入门-基本数据类型
Mar 28 #Javascript
Restify中接入Socket.io报Error:Can’t set headers的错误解决
Mar 28 #Javascript
Vue.js 60分钟快速入门教程
Mar 28 #Javascript
bootstrap table实现单击单元格可编辑功能
Mar 28 #Javascript
Web前端框架Angular4.0.0 正式版发布
Mar 28 #Javascript
JavaScript实现经纬度转换成地址功能
Mar 28 #Javascript
You might like
Ajax PHP 边学边练 之三 数据库
2009/11/26 PHP
PHP gbk环境下json_dencode传送来的汉字
2012/11/13 PHP
shell脚本作为保证PHP脚本不挂掉的守护进程实例分享
2013/07/15 PHP
smarty中post用法实例
2014/11/28 PHP
Javascript操纵Cookie实现购物车程序
2007/02/15 Javascript
js同时按下两个方向键
2007/12/01 Javascript
转换json格式的日期为Javascript对象的函数
2010/07/13 Javascript
基于jQuery的实现简单的分页控件
2010/10/10 Javascript
JS去除数组重复值的五种不同方法
2013/09/06 Javascript
利用jQuery简单实现产品展示图片左右滚动功能(示例代码)
2014/01/02 Javascript
Jquery常用的方法汇总
2015/09/01 Javascript
js老生常谈之this,constructor ,prototype全面解析
2016/04/05 Javascript
最佳的JavaScript错误处理实践
2016/07/16 Javascript
JS Canvas定时器模拟动态加载动画
2016/09/17 Javascript
jQuery实现别踩白块儿网页版小游戏
2017/01/18 Javascript
详解ES6通过WeakMap解决内存泄漏问题
2018/03/09 Javascript
vue iview组件表格 render函数的使用方法详解
2018/03/15 Javascript
vue axios请求超时的正确处理方法
2018/04/02 Javascript
JS实现的文件拖拽上传功能示例
2018/05/21 Javascript
Python写入CSV文件的方法
2015/07/08 Python
详解Python开发中如何使用Hook技巧
2017/11/01 Python
python实现梯度下降算法
2020/03/24 Python
浅析python3字符串格式化format()函数的简单用法
2018/12/07 Python
python 实现一个反向单位矩阵示例
2019/11/29 Python
如何利用CSS3制作3D效果文字具体实现样式
2013/05/02 HTML / CSS
非常漂亮的CSS3百叶窗焦点图动画
2016/02/24 HTML / CSS
全球酒店比价网:HotelsCombined
2017/06/20 全球购物
高级Java程序员面试题
2016/06/23 面试题
文秘专业毕业生就业推荐信
2013/11/08 职场文书
教育局长自荐信范文
2013/12/22 职场文书
酒后驾驶检讨书
2014/01/27 职场文书
食品安全工作实施方案
2014/03/26 职场文书
2019终止劳动合同协议书最新范本!
2019/07/09 职场文书
浅谈克隆 JavaScript
2021/11/02 Javascript
室外天线与收音机天线杆接合方法
2022/04/05 无线电
MongoDB支持的数据类型
2022/04/11 MongoDB