ホームページ > ウェブフロントエンド > jsチュートリアル > 現在のページで中央揃えのページング効果を実現する JS メソッド

現在のページで中央揃えのページング効果を実現する JS メソッド

PHPz
リリース: 2018-10-12 16:12:13
オリジナル
1392 人が閲覧しました

この記事では、現在のページの中央ページング効果を実現するための 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=&#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 までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート