html css分页特效,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

• 首页

  上一页

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

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