현재 페이지에서 중앙 페이징 효과를 달성하는 JS 방법

PHPz
풀어 주다: 2018-10-12 16:12:13
원래의
1350명이 탐색했습니다.

이 글에서는 현재 페이지의 중앙 페이징 효과를 구현하기 위한 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=&#39;javascript:;&#39; class=&#39;current&#39;>",i,"</a>");
    }
    else
    {
      buf.push("<a href=&#39;javascript:;&#39; class=&#39;normal&#39;>",i,"</a>");
    }
  }
  document.write(buf);
}
로그인 후 복사

실행 효과는 아래와 같습니다.

더 많은 튜토리얼을 보려면

JavaScript 튜토리얼

을 방문하세요.

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
최신 이슈
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿