1. 云栖社区>
  2. >
  3. 正文

JS实现当前页居中分页效果的方法_javascript技巧

作者:用户 来源:互联网 时间:2016-06-18 10:03:35

js分页效果

JS实现当前页居中分页效果的方法_javascript技巧 - 摘要: 本文讲的是JS实现当前页居中分页效果的方法_javascript技巧, 本文实例讲述了JS实现当前页居中分页效果的方法。分享给大家供大家参考。具体实现方法如下: function show_page(cur_pc) { var cp=cur_pc; //curent page count var

本文实例讲述了JS实现当前页居中分页效果的方法。分享给大家供大家参考。具体实现方法如下:

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);
}

运行效果如下图所示:

201561892926871.jpg

希望本文所述对大家的javascript程序设计有所帮助。

以上是云栖社区小编为您精心准备的的内容,在云栖社区的博客、问答、公众号、人物、课程等栏目也有的相关内容,欢迎继续使用右上角搜索按钮进行搜索js 分页效果 jquery分页获取当前页、thinkphp 分页 当前页、分页保存后跳回当前页、分页算法 当前页、css 分页当前页特效,以便于您获取更多的相关知识。