js css自定义分页效果


Posted in Javascript onFebruary 24, 2017

网上看了好多分页插件都不太满意,所以根据网上的一些东西自己做了一个,可以搭配mvc和数据库

效果图片

js css自定义分页效果

先来css(样式不喜欢的话可以不用这个)

.pagelist {padding:10px 0; text-align:center;}
.pagelist span,.pagelist a{ border-radius:3px; border:1px solid #dfdfdf;display:inline-block; padding:5px 12px;}
.pagelist a{ margin:0 3px;}
.pagelist span.current{ background:#09F; color:#FFF; border-color:#09F; margin:0 2px;}
.pagelist a:hover{background:#09F; color:#FFF; border-color:#09F; }
.pagelist label{ padding-left:15px; color:#999;}
.pagelist label b{color:red; font-weight:normal; margin:0 3px;}
.popup 
{
  display: none;
  list-style-type: none; 
  overflow: hidden;
  position: absolute;
}
/*显示弹出菜单*/
.popupmenu li:hover ul {
  display: block;
  z-index:2;
  /*left:840px;*/
}
.popupmenu li ul:hover {
  display: block;
  z-index:2;
  /*left:840px;*/
}

html 需要引用jquary

<div class="pagelist" style="margin-top:500px">

  <ul class="popupmenu">
    <li>
      <a href="p.url?page=1" rel="external nofollow" >首页</a>
      <a href="p.url?page=p.up" rel="external nofollow" >上一页</a>
      <a id="pop" href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" onclick="popup()">1/2</a>
      <ul id="popup" class="popup">
        <li>
          <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" >1/2</a>
        </li>
        <li>
          <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" >2/2</a>
        </li>
      </ul>
      <a href="p.url?page=p.next" rel="external nofollow" >下一页</a>
      <a href="p.url?page=p.sum" rel="external nofollow" >尾页</a>
    </li>
  </ul>

</div>

js

<script type="text/javascript">
  // 获取id为pop的元素的位置
  var popX = $('#pop').offset().left;
  // alert($('#pop').height());
  var popY = $('#pop').offset().top;
  var lineheight = $('#pop').height();
  var linumber = $('#popup li').length;
  // alert(lineheight);
  // 设置id为popup元素的位置
  $("#popup").css({ "position": "fixed", "top": (popY - (linumber * 27.5)) + "px", "left": (popX - 23) + "px", "line-height": lineheight + "px" });

</script>

分页的类

public partial class page
 {
   // 当前页
   public int pagenow { get; set; } 
   // 总页数
   public int sum { get; set; }
   // 地址
   public string url { get; set; }
   // 上一页
   public int up { get; set; }
   // 下一页
   public int next { get; set; }
 }

想要使用的话,在控制器获取数据,替换掉html上的相应位置就行了。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript prototype,executing,context,closure
Dec 24 Javascript
css transform 3D幻灯片特效实现步骤解读
Mar 27 Javascript
javascript内存管理详细解析
Nov 11 Javascript
网页中表单按回车就自动提交的问题的解决方案
Nov 03 Javascript
使用js获取图片原始尺寸
Dec 03 Javascript
jquery 构造函数在表单提交过程中修改数据
May 25 Javascript
jQuery自动完成插件completer附源码下载
Jan 04 Javascript
JS实现获取剪贴板内容的方法
Jun 21 Javascript
EasyUI折叠表格层次显示detailview详解及实例
Dec 28 Javascript
JQuery和html+css实现带小圆点和左右按钮的轮播图实例
Jul 22 jQuery
BootStrap selectpicker后台动态绑定数据的方法
Jul 28 Javascript
VUE前后端学习tab写法实例
Aug 06 Javascript
jQuery快速高效制作网页交互特效
Feb 24 #Javascript
Angular.js自定义指令学习笔记实例
Feb 24 #Javascript
利用原生JS与jQuery实现数字线性变化的动画
Feb 24 #Javascript
JavaScript和jQuery制作光棒效果
Feb 24 #Javascript
微信小程序 动态的设置图片的高度和宽度详解及实例代码
Feb 24 #Javascript
微信小程序实现实时圆形进度条的方法示例
Feb 24 #Javascript
JavaScript中三种常见的排序方法
Feb 24 #Javascript
You might like
apache+php+mysql安装配置方法小结
2010/08/01 PHP
php中http_build_query 的一个问题
2012/03/25 PHP
PHP开发框架kohana3 自定义路由设置示例
2014/07/14 PHP
PHP生成树的方法
2015/07/28 PHP
PHP多维数组遍历方法(2种实现方法)
2015/12/10 PHP
php实现图片上传并进行替换操作
2016/03/15 PHP
php将一维数组转换为每3个连续值组成的二维数组
2016/05/06 PHP
为何说PHP引用是个坑,要慎用
2018/04/02 PHP
CodeIgniter框架数据库基本操作示例
2018/05/24 PHP
laravel 5.3 单用户登录简单实现方法
2019/10/14 PHP
求解开jscript.encode代码的asp函数
2007/02/28 Javascript
JS去除右边逗号的简单方法
2013/07/03 Javascript
Jquery 模板数据绑定插件的使用方法详解
2013/07/08 Javascript
jquery实现的鼠标拖动排序Li或Table
2014/05/04 Javascript
详解jQuery向动态生成的内容添加事件响应jQuery live()方法
2015/11/02 Javascript
使用node.js中的Buffer类处理二进制数据的方法
2016/11/26 Javascript
Nodejs 搭建简单的Web服务器详解及实例
2016/11/30 NodeJs
微信小程序本作用域下调用全局JS详解及实例
2017/02/22 Javascript
详解如何构建Angular项目目录结构
2017/07/13 Javascript
微信小程序页面跳转功能之从列表的item项跳转到下一个页面的方法
2017/11/27 Javascript
vue动态设置img的src路径实例
2018/09/18 Javascript
React 使用recharts实现散点地图的示例代码
2018/12/07 Javascript
详解vue-element Tree树形控件填坑路
2019/03/26 Javascript
Vue递归组件+Vuex开发树形组件Tree--递归组件的简单实现
2019/04/01 Javascript
vue实现员工信息录入功能
2020/06/11 Javascript
[45:17]DOTA2-DPC中国联赛定级赛 Phoenix vs DLG BO3第三场 1月9日
2021/03/11 DOTA
python实现的一只从百度开始不断搜索的小爬虫
2013/08/13 Python
python装饰器与递归算法详解
2016/02/18 Python
深入解析神经网络从原理到实现
2019/07/26 Python
Django的性能优化实现解析
2019/07/30 Python
Python:二维列表下标互换方式(矩阵转置)
2019/12/02 Python
python3连接mysql获取ansible动态inventory脚本
2020/01/19 Python
银行员工职业规划范文
2014/01/21 职场文书
二年级语文教学反思
2014/02/02 职场文书
音乐教育专业自荐信
2014/09/18 职场文书
Innodb存储引擎中的后台线程详解
2022/04/03 MySQL