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 相关文章推荐
select 控制网页内容隐藏于显示的实现代码
May 25 Javascript
如何调试异步加载页面里包含的js文件
Oct 30 Javascript
21个JavaScript事件(Events)属性汇总
Dec 02 Javascript
JS去除iframe滚动条的方法
Apr 01 Javascript
jQuery图片渐变特效的简单实现
Jun 25 Javascript
json格式的javascript对象用法分析
Jul 04 Javascript
jQuery插件zTree实现获取一级节点数据的方法
Mar 08 Javascript
微信小程序page的生命周期和音频播放及监听实例详解
Apr 07 Javascript
JS获取浏览器地址栏的多个参数值的任意值实例代码
Jul 24 Javascript
JS Object.preventExtensions(),Object.seal()与Object.freeze()用法实例分析
Aug 25 Javascript
使用Vue.set()方法实现响应式修改数组数据步骤
Nov 09 Javascript
vue keep-alive的简单总结
Jan 25 Vue.js
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
php文件压缩之PHPZip类用法实例
2015/06/18 PHP
php实现XSS安全过滤的方法
2015/07/29 PHP
PHP实现Google plus的好友拖拽分组效果
2016/10/21 PHP
网页设计常用的一些技巧
2006/12/22 Javascript
Javascript select控件操作大全(新增、修改、删除、选中、清空、判断存在等)
2008/12/19 Javascript
jquery随意添加移除html的实现代码
2011/06/21 Javascript
ie下动态加态js文件的方法
2011/09/13 Javascript
ASP.NET中AJAX 调用实例代码
2012/05/03 Javascript
bootstrap网页框架的使用方法
2016/05/10 Javascript
一个简单的JavaScript Map实例(分享)
2016/08/03 Javascript
Vue.js基础学习之class与样式绑定
2017/03/20 Javascript
原生Aajax 和jQuery Ajax 写法个人总结
2017/03/24 jQuery
vue2.0的contextmenu右键弹出菜单的实例代码
2017/07/24 Javascript
详解基于vue-cli配置移动端自适应
2018/01/13 Javascript
从零开始最小实现react服务器渲染详解
2018/01/26 Javascript
基于JavaScript实现瀑布流布局
2018/08/15 Javascript
vue过滤器用法实例分析
2019/03/15 Javascript
vue router 组件的高级应用实例代码
2019/04/08 Javascript
javascript设计模式 ? 抽象工厂模式原理与应用实例分析
2020/04/09 Javascript
python函数缺省值与引用学习笔记分享
2013/02/10 Python
python学生信息管理系统
2018/03/13 Python
Python设计模式之模板方法模式实例详解
2019/01/17 Python
Python3.5面向对象与继承图文实例详解
2019/04/24 Python
python函数的万能参数传参详解
2019/07/26 Python
Django 解决上传文件时,request.FILES为空的问题
2020/05/20 Python
使用pycharm和pylint检查python代码规范操作
2020/06/09 Python
利用python如何实现猫捉老鼠小游戏
2020/12/04 Python
装饰资料员岗位职责
2013/12/30 职场文书
工伤赔偿协议书范本
2014/04/15 职场文书
社会工作专业求职信
2014/07/15 职场文书
大学生见习期满自我鉴定
2014/09/13 职场文书
党员群众路线自我剖析材料
2014/10/06 职场文书
工作自我推荐信范文
2015/03/25 职场文书
公司员工违法违章行为检讨书
2019/06/24 职场文书
2019下半年英语教师的教学工作计划(3篇)
2019/09/25 职场文书
JavaScript实现酷炫的鼠标拖尾特效
2022/02/18 Javascript