recherche

Maison  >  Article  >  interface Web  >  Yuansheng JS implémente la pagination de pages Web

Yuansheng JS implémente la pagination de pages Web

php中世界最好的语言
php中世界最好的语言original
2018-04-19 11:38:571596parcourir

Cette fois, je vais vous amener Yuansheng JS pour réaliser la pagination de pages Web. Quelles sont les précautions à prendre pour Yuansheng JS pour réaliser la pagination de pages Web ? 

<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>

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

Explication détaillée de la liaison bidirectionnelle vue.js

Comment implémenter des nombres et des chaînes dans Conversion mutuelle JS

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：Explication détaillée des étapes de développement de composants Angular2Article suivant：Explication détaillée des étapes de développement de composants Angular2

Articles Liés

Voir plus