全网整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线:400-708-3566

js css自定义分页效果

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

效果图片

先来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上的相应位置就行了。

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


# js  # css  # 分页  # 非常不错的一个JS分页效果代码  # 值得研究  # 纯js分页代码(简洁实用)  # js分页显示div的内容  # 利用js制作html table分页示例(js实现分页)  # 纯javascript实现分页(两种方法)  # js表格分页实现代码  # JS+Ajax+Jquery实现页面无刷新分页以及分组 超强的实现  # 基于jQuery的js分页代码  # JS分页控件 可用于无刷新分页  # 新闻内页-JS分页  # 下一页  # 上一页  # 看了  # 不太  # 不喜欢  # 网上  # 尾页  # 弹出  # 首页  # 先来  # 大家多多  # 就行了  # 当前页  # background  # current  # FFF  # color  # margin  # display 


相关文章: 如何在云虚拟主机上快速搭建个人网站?  免费网站制作模板下载,除了易企秀之外还有什么H5平台可以制作H5长页面,最好是免费的?  建站主机助手选型指南:2025年热门推荐与高效部署技巧  如何通过宝塔面板实现本地网站访问?  制作网站的过程怎么写,用凡科建站如何制作自己的网站?  建站主机是什么?如何选择适合的建站主机?  ,南京靠谱的征婚网站?  如何选择靠谱的建站公司加盟品牌?  建站主机CVM配置优化、SEO策略与性能提升指南  教育培训网站制作流程,请问edu教育网站的域名怎么申请?  建站主机是否等同于虚拟主机?  建站主机数据库如何配置才能提升网站性能?  建站VPS配置与SEO优化指南:关键词排名提升策略  网站设计制作企业有哪些,抖音官网主页怎么设置?  香港服务器租用费用高吗?如何避免常见误区?  魔方云NAT建站如何实现端口转发?  齐河建站公司:营销型网站建设与SEO优化双核驱动策略  如何使用Golang table-driven基准测试_多组数据测量函数效率  定制建站价位费用解析与套餐推荐全攻略  如何在云主机上快速搭建多站点网站?  香港网站服务器数量如何影响SEO优化效果?  如何在香港免费服务器上快速搭建网站?  北京企业网站设计制作公司,北京铁路集团官方网站?  模具网站制作流程,如何找模具客户?  深圳 网站制作,深圳招聘网站哪个比较好一点啊?  C++如何使用std::optional?(处理可选值)  如何选择适合PHP云建站的开源框架?  宝塔Windows建站如何避免显示默认IIS页面?  广州网站设计制作一条龙,广州巨网网络科技有限公司是干什么的?  招商网站制作流程,网站招商广告语?  如何快速查询域名建站关键信息?  高端云建站费用究竟需要多少预算?  魔毅自助建站系统:模板定制与SEO优化一键生成指南  如何制作新型网站程序文件,新型止水鱼鳞网要拆除吗?  手机怎么制作网站教程步骤,手机怎么做自己的网页链接?  武汉外贸网站制作公司,现在武汉外贸前景怎么样啊?  Python多线程使用规范_线程安全解析【教程】  如何基于云服务器快速搭建网站及云盘系统?  c# 在高并发场景下,委托和接口调用的性能对比  建站之星代理平台如何选择最佳方案?  零基础网站服务器架设实战:轻量应用与域名解析配置指南  网站制作壁纸教程视频,电脑壁纸网站?  在线ppt制作网站有哪些,请推荐几个好的课件下载的网站?  长沙企业网站制作哪家好,长沙水业集团官方网站?  建站主机选购指南:核心配置与性价比推荐解析  如何在云主机快速搭建网站站点?  免费网站制作appp,免费制作app哪个平台好?  如何快速查询网站的真实建站时间?  5种Android数据存储方式汇总  如何在宝塔面板创建新站点? 

您的项目需求

*请认真填写需求信息,我们会在24小时内与您取得联系。