js css自定义分页效果

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

效果图片

先来css(样式不喜欢的话可以不用这个)。页面列表{ padd :10 px 0；文本对齐：居中；}.页面列表跨度，页面列表a { border-radius :3 pxborder:1px实心# dfdfdfdisplay :内嵌块；padding:5px 12px }。页面列表a { margin:0 3px}。页面列表跨度。当前{背景： # 09F颜色： # FFF；边框-颜色： # 09Fmargin:0 2px }。页面列表a :悬停{背景： # 09F颜色： # FFF；边框-颜色： # 09F}.页面列表标签{左填充：15像素；color: # 999}。页面列表标签b { color:red字体粗细：正常；margin:0 3px}。弹出{ display:无列表样式类型：无；飞越：隐藏；绝对位置：}/*显示弹出菜单*/.弹出菜单Li :悬停ul {显示： }块；z索引：2;/*左：840 px*/}.弹出菜单Li ul :悬停{显示：块；z索引：2;/*左：840 px*/}html需要引用jquary

div class='页面列表' style=' margin-top :500 px ' ul class='弹出式菜单'阿利href='p.url？page=1' rel='external nofollow '首页/a a href='p.url？page=p . up ' rel='外部无跟随'上一页/a a id=' pop ' href=' # ' rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow ' onclick=' popup()' 1/2/a ul id=' popup ' class=' popup '阿利href=' # rel='外部nofollow ' rel='外部nofollow ' rel='外部nofollow ' 1/2/a/Li阿利href=' # ' rel ' external no follow ' rel=' rel=' external no follow ' page=p . next ' rel=' external no follow '下一页/a a href='p.url？ page=p . sum ' rel='外部无跟随'尾页/a /li /ul/divjs

脚本类型='text/javascript' //获取编号为流行音乐的元素的位置var popX=$('#pop ').偏移量()。向左；//alert($('#pop ').高度());var popY=$('#pop ').偏移量()。顶部；var lineheight=$('#pop ').高度();var linnumber=$(' # popup Li ').长度；//alert(行高)；//设置编号为弹出元素的位置$('#popup ').css({ 'position': 'fixed '，' top ' :(popY-(linnumber * 27.5))' px '，' left': (popX - 23) 'px '，' line-height ' :行高' px ' })；/script分页的类

公共分部类页面{ //当前页public int pagenow { get设置；} //总页数public int sum { get设置；} //地址公共字符串url { get设置；} //上一页public int up { get设置；} //下一页public int next { get设置；} }想要使用的话，在控制器获取数据，替换掉超文本标记语言上的相应位置就行了。

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