天天看点

当前页居中分页效果的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>");    

            buf.push("<a href='javascript:;' class='normal'>",i,"</a>");            

    document.write(buf);

}

当前页居中分页效果的JS实现
当前页居中分页效果的JS实现
当前页居中分页效果的JS实现

<a target="_blank" href="http://www.cnblogs.com/lhb25/p/must-read-links-for-web-designers-and-developers-volume-12.html">Web 前端工程师和设计师必读精华文章推荐</a>

<a href="http://www.cnblogs.com/lhb25//lhb25/archive/2011/07/28/html5-awesome-single-page-sites-inspiration.html" target="_blank">酷!15个精美的 HTML5 单页网站作品欣赏</a>

<a target="_blank" href="http://www.cnblogs.com/lhb25//lhb25/archive/2011/11/22/best-awesome-css3-animation-demos.html">炫!35个让人惊讶的 CSS3 动画效果演示</a>

<a href="http://www.cnblogs.com/lhb25//lhb25/archive/2012/03/02/30-mind-blowing-parallax-scrolling-effect-websites.html" target="_blank">赞!30个与众不同的优秀视差滚动效果网站</a>

<a target="_blank" href="http://www.cnblogs.com/lhb25//lhb25/archive/2012/01/13/25-outstanding-single-page-website-designs.html">靓å!25个优秀的国外单页网站设计作品欣赏</a>

<a target="_blank" href="http://www.cnblogs.com/lhb25//lhb25/archive/2011/08/09/awesome-html5-and-javascript-effects.html">帅!8个惊艳的 HTML5 和 JavaScript 特效</a>

<a href="http://www.cnblogs.com/lhb25//lhb25/archive/2011/06/27/35-exclusive-rainbow-colored-flash-websites.html" target="_blank">顶!35个很漂亮的国外 Flash 网站作品欣赏</a>

<a href="http://www.cnblogs.com/lhb25//lhb25/archive/2011/08/24/outstanding-admin-panels-part-one.html" target="_blank">哇!34个漂亮网站和应用程序后台管理界面</a>

当前页居中分页效果的JS实现

<a href="http://www.yyyweb.com/go/web" target="_blank">本博客新站点 ◆ 前端里 ◆ 欢迎围观:)</a>

欢迎任何形式的转载,但请务必注明出处。

继续阅读