JS实现当前页居中分页效果的方法
程序员文章站
2022-04-10 11:17:02
...
这篇文章主要介绍了JS实现当前页居中分页效果的方法,涉及javascript操作页面元素与样式的相关技巧,需要的朋友可以参考下
function show_page(cur_pc) { var cp=cur_pc; //curent page count var tp=this.p; //total page count var sp=this.pc; //show page count var bp; //begin page count var ep; //end page count if(sp%2==0) sp=sp+1; //this process need an odd number var dp=Math.floor(sp/2); //each side count to show var dif=tp-sp; //check weather it have enough page to make mid-show var f=cp-dp; //to check weather it has enough page to make mid-show from the begin var g=tp-(cp+dp); //to check weather it has enough page to make mid-show from the end if(sp && dif>=0) { if(g>0) { if(f>0) { bp=f; ep=cp+dp; } else { bp=1; ep=2*dp+1; } } else { bp=tp-2*dp; ep=tp; } } else { bp=1; ep=tp; } var buf=[]; for(var i=bp;i<=ep;i++) { if(i==cur_pc) { buf.push("<a href='javascript:;' class='current'>",i,"</a>"); } else { buf.push("<a href='javascript:;' class='normal'>",i,"</a>"); } } document.write(buf); }
运行效果如下图所示:
更多教程请访问 JavaScript教程教程
推荐阅读
-
PHP使用Mysqli类库实现完美分页效果的方法
-
jQuery使用eraser.js插件实现擦除、刮刮卡效果的方法【附eraser.js下载】
-
jQuery animate()实现背景色渐变效果的处理方法【使用jQuery.color.js插件】
-
js实现当前页面刷新的三种方法
-
JS前端的隐藏显示,点击隐藏或者显示的效果实现方法
-
Node.js中Bootstrap-table的两种分页的实现方法
-
vue.js仿hover效果的实现方法示例
-
jQuery使用eraser.js插件实现擦除、刮刮卡效果的方法【附eraser.js下载】
-
vue.js-div滚动条隐藏但有滚动效果的实现方法
-
jquery.page.js简单的分页效果实现教程