html css分页特效,js css自定义分页效果

阳光穿透心脏的1/2处 2022-10-06 10:53 124阅读 0赞

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

效果图片

![aa09ff96e4196cce4c3b78bae2dc51ee.png][]

先来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

*  首页
    
    上一页
    
    1/2
    
     *  1/2
     *  2/2
    
    下一页
    
    尾页

js

// 获取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" \});

分页的类

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

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

[aa09ff96e4196cce4c3b78bae2dc51ee.png]: /images/20221005/c9379ef775cc4fd3a1ff687edc51f270.png

发表评论取消回复

表情：

评论列表（有 0 条评论，124人围观）

还没有评论，来说两句吧...

相关阅读

相关 bootstrap自定义分页

1、先看分页效果页面数小于7页时 ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10

古城微笑少年丶/ 2023年02月27日 12:18/ 0 赞/ 165 阅读

相关 js+html+css实现一个分页特效

html: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <ti

布满荆棘的人生/ 2023年01月11日 09:15/ 0 赞/ 135 阅读

相关 html css分页特效,js css自定义分页效果

网上看了好多分页插件都不太满意，所以根据网上的一些东西自己做了一个，可以搭配mvc和数据库效果图片 ![aa09ff96e4196cce4c3b78bae2dc51ee.

阳光穿透心脏的1/2处/ 2022年10月06日 10:53/ 0 赞/ 125 阅读

相关 Page翻页分页css代码，分页div+css代码

css分页代码集合模板如下翻页上下分页按钮效果一 ![20141222110027656][] DIV代码： <table styl

朴灿烈づ我的快乐病毒、/ 2022年08月06日 04:23/ 0 赞/ 179 阅读

相关 yii2自定义分页分页属性

先说明下我们本篇文章都要讲哪些内容 1. 分页的使用，一步一步的教你怎么做 2. 分页类LinkPager和Pagination都可以自定义哪些属性 3. 分页类Lin

男娘i/ 2022年07月17日 01:26/ 0 赞/ 301 阅读

相关自定义分页

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="U

不念不忘少年蓝@/ 2022年06月02日 07:22/ 0 赞/ 230 阅读

相关 laravel自定义分页

本篇博客将给大家讲述如何修改博客的分页样式，这是博主前几天再修改界面分页样式所遇到的问题。博主也是先百度，但是网络上的答案也是层出不穷,很多人

水深无声/ 2022年04月12日 11:16/ 0 赞/ 312 阅读

相关 js实现页面分页效果

最近接触老项目，项目要求修改表格添加分页功能，采用的bootstrap-table,在完成项目后，决定原生简单实现一下分页效果。效果： ![watermark_type_

谁借莪１个温暖的怀抱￠/ 2021年11月23日 00:42/ 0 赞/ 435 阅读

相关自定义分页

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <sc

灰太狼/ 2021年06月24日 14:37/ 0 赞/ 529 阅读

相关 CSS实现分页条

对于搜索引擎或电子商务网站，常常将信息分页显示，这样可以减少页面大小，进而提高页面的加载速度。分页显示后，就需要通过分页导航来告诉用户要浏览的信息量，方便用户快速跳过一些...

小灰灰/ 2020年04月29日 05:55/ 0 赞/ 1231 阅读