Heim > Artikel > Web-Frontend > Yuansheng JS implementiert Webseiten-Paging

Yuansheng JS implementiert Webseiten-Paging

php中世界最好的语言Original: 2018-04-19 11:38:571539Durchsuche

Dieses Mal zeige ich Ihnen Yuansheng JS, um Webseiten-Paging zu realisieren. Was sind die Vorsichtsmaßnahmen für Yuansheng JS, um Webseiten-Paging zu realisieren?

<html>
 <head>
  <style>
   *{padding:0;margin:0}
   ul,li{list-style:none}
   .left{float:left}
   .right{float:left}
   .page_container{height:
 30px; line-height: 30px;width: 510px;overflow: hidden;text-align: 
center;padding: 30px 0;color: #757575;}
   .page_num_container{width:
 301px;margin:0 10px;border:1px solid #ccc; border-right:0;box-sizing: 
border-box;overflow: hidden;position: relative;height: 32px;}
   .page_num_container ul{position: absolute;top: 0;}
   .page_num_container
 ul li{float: left;width: 30px;border-right:1px solid #ccc ;box-sizing: 
border-box;text-align: center;cursor: pointer;}
   .page_num_container ul li:hover,.page_num_container ul li.active{ background: #f4a100;color: #fff;}
   .page_btn{width: 60px;border:1px solid #ccc;box-sizing: border-box;cursor: pointer;}
   .page_btn:hover{ background: #f4a100;color: #fff;}
   .all_page:hover{background:none;color: #757575;}
   .prev_btn{margin-right: 10px;}
  </style>
  <scriptsrc="http://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
 </head>
<body>
<!--页码-->
 <pclass="page_container center">
  <pclass="page_btn prev_page left">上一页</p>
  <pclass="page_num_container left"id="page_num_container">
  <ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  <li>6</li>
  <li>7</li>
  <li>8</li>
  <li>9</li>
  <li>10</li>
  <li>11</li>
  <li>12</li>
  <li>13</li>
  <li>14</li>
  <li>15</li>
  <li>16</li>
  <li>17</li>
  <li>18</li>
  <li>19</li>
  <li>20</li>
  <li>21</li>
  </ul>
  </p>
  <pclass="page_btn next_page left">下一页</p>
  <pclass="page_btn all_page right">共21页</p>
 </p>
 <!--页码-->
 <script>
  function page(){
  var contain=$(".page_num_container");
  var ul= contain.children("ul");
  var li = ul.children("li");
  var length= li.length;
  var index=0;
  var leftIndex=0;
  var prev_btn= contain.siblings(".prev_page");
  var next_btn= contain.siblings(".next_page ");
  ul.css("width",li.outerWidth()*length);
  change_page(index);
  function change_page(eqindex){
  if(eqindex<0)
  {
  index=0;
  }
  else if(eqindex>=length ){
  index=length-1;
  }
  if(index-4<=0){
  leftIndex=0;
  }
  else if(index>length-10)
  {
  leftIndex=Math.ceil(length/2);
  }
  else{
  leftIndex=index-4;
  }
  ul.animate({"left":"-"+leftIndex*li.outerWidth()+"px"},200);
  li.eq(index).addClass("active").siblings(li).removeClass("active");
  }
  prev_btn.click(function(){
  index=index-1;
  change_page(index);
  })
  next_btn.click(function(){
  index=index+1;
  change_page(index);
  })
  li.click(function(){
  index=$(this).index();
  change_page(index);
  })
 }
 page()
  </script>
 </body>
</html>

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Empfohlene Lektüre:

Detaillierte Erklärung der bidirektionalen Bindung von vue.js

So implementieren Sie Zahlen und Zeichenfolgen in JS Gegenseitige Konvertierung

Das obige ist der detaillierte Inhalt vonYuansheng JS implementiert Webseiten-Paging. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Detaillierte Erläuterung der Schritte zur Entwicklung von Angular2-KomponentenNächster Artikel：Detaillierte Erläuterung der Schritte zur Entwicklung von Angular2-Komponenten

In Verbindung stehende Artikel

Mehr sehen