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 相关文章推荐
js中 关于undefined和null的区别介绍
Apr 16 Javascript
JavaScript动态创建div属性和样式示例代码
Oct 09 Javascript
手机号码,密码正则验证
Sep 04 Javascript
js闭包所用的场合以及优缺点分析
Jun 22 Javascript
快速掌握Node.js事件驱动模型
Mar 21 Javascript
JS实现环形进度条(从0到100%)效果
Jul 05 Javascript
canvas 实现中国象棋
Feb 17 Javascript
令按钮悬浮在(手机)页面底部的实现方法
May 02 Javascript
JavaScript中Object值合并方法详解
Dec 22 Javascript
ES6 fetch函数与后台交互实现
Nov 14 Javascript
使用Vue.js中的过滤器实现幂方求值的方法
Aug 27 Javascript
Angular单元测试之事件触发的实现
Jan 20 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
PHP脚本数据库功能详解(下)
2006/10/09 PHP
PHP针对JSON操作实例分析
2015/01/12 PHP
PHP call_user_func和call_user_func_array函数的简单理解与应用分析
2019/11/25 PHP
PHP unset函数原理及使用方法解析
2020/08/14 PHP
jquery 操作日期、星期、元素的追加的实现代码
2012/02/07 Javascript
Node.js安装教程和NPM包管理器使用详解
2014/08/16 Javascript
node.js中的path.sep方法使用说明
2014/12/08 Javascript
JavaScript中的Number数字类型学习笔记
2016/05/26 Javascript
用瀑布流的方式在网页上插入图片的简单实现方法
2016/09/23 Javascript
利用Bootstrap实现表格复选框checkbox全选
2016/12/21 Javascript
基于jquery二维码生成插件qrcode
2017/01/07 Javascript
Angualrjs 表单验证的两种方式(失去焦点验证和点击提交验证)
2017/05/09 Javascript
基于Vue实现支持按周切换的日历
2020/09/24 Javascript
Vue父子模版传值及组件传值的三种方法
2017/11/27 Javascript
vue 实现 ios 原生picker 效果及实现思路解析
2017/12/06 Javascript
Vue实现Header渐隐渐现效果的实例代码
2020/11/05 Javascript
[01:03:22]LGD vs OG 2018国际邀请赛淘汰赛BO3 第一场 8.25
2018/08/29 DOTA
Python中的对象,方法,类,实例,函数用法分析
2015/01/15 Python
Python3.x版本中新的字符串格式化方法
2015/04/24 Python
python之Socket网络编程详解
2016/09/29 Python
Python使用文件锁实现进程间同步功能【基于fcntl模块】
2017/10/16 Python
Python算法之图的遍历
2017/11/16 Python
JavaScript实现一维数组转化为二维数组
2018/04/17 Python
在python中实现将一张图片剪切成四份的方法
2018/12/05 Python
python实现五子棋人机对战游戏
2020/03/25 Python
python将print输出的信息保留到日志文件中
2019/09/27 Python
如何使用python记录室友的抖音在线时间
2020/06/29 Python
领先的英国注册在线药房 :Simply Meds Online
2019/03/28 全球购物
YBF Beauty官网:美丽挚友,美国知名彩妆品牌
2020/11/22 全球购物
计算机专业优秀大学生自我总结
2014/01/21 职场文书
会计专业大学生求职信范文
2014/01/28 职场文书
考试没考好检讨书(精选篇)
2014/11/16 职场文书
2014年幼儿园教研工作总结
2014/12/04 职场文书
入党积极分子党支部意见
2015/06/02 职场文书
职工食堂管理制度
2015/08/06 职场文书
Jackson 反序列化时实现大小写不敏感设置
2021/06/29 Java/Android