jQuery+css實作的換頁標籤列效果_jquery-js教程-PHP中文網

jQuery+css實作的換頁標籤列效果_jquery

WBOY

發布： 2016-05-16 15:17:45

原創

1464 人瀏覽過

本文實例講述了jQuery+css實現的換頁標籤欄效果。分享給大家參考，具體如下：

運作效果截圖如下：

具體程式碼如下：

<!DOCTYPE html>
<html>
 <head>
  <title>index</title>
  <script type="text/javascript" src="jquery.js"></script>
  <style type="text/css" >
   body {
    margin:0; padding:0; font-size:12px; color:gray;
   }
   .container {
    height:200px; background:#F2F2F2; border-radius:6px;
    -webkit-border-radius:6px; -moz-border-radius:6px; border:6px solid #D5D5D5; 
   }
   .wrapper {
    width:90%; margin:0px auto;
   }
   .pageContainer {
    margin:0 auto; height:30px; position:relative; width:100%;
   }
   .page {
    width:30px; height:30px; background:#494949; border-radius:30px; margin-left:5px;
    -webkit-border-radius:30px; -moz-border-radius:30px; line-height:30px; font-size:15px;
    display:block; text-align:center; color:#fff; float:left; cursor:pointer; float:left;
    margin-top:5px;
   }
   .page:hover {
    background:#42CFFD; font-weight:bolder;
   }
   .page.active {
    background:#0864C0; 
   }
  </style>
  <script type="text/javascript" >
   (function(){
    $.fn.pageCreate = function(url, allPage, currentPage, pageTarget){
     if(isNaN(allPage) || allPage < 1 || isNaN(currentPage) || currentPage < 1 || $.trim(url) == "") {
      return;
     }
     var html = [],
      self = $(this),
      pageTarget = pageTarget&#63;"":""
      prevPage = currentPage > 1 &#63; currentPage - 1 : 0,
      nextPage = currentPage < allPage &#63; currentPage + 1 : 0
      left = '<a target="'+pageTarget+'" class="page" href="'+url+'1"><<</a><a target="'+pageTarget+'" href="'+(prevPage==0&#63;"javascript:void(0)":url+prevPage)+'" class="page">&lt</a>',
      right = '<a target="'+pageTarget+'" href="'+(nextPage==allPage&#63;"javascript:void(0)":url+prevPage)+'" class="page">></a><a target="'+pageTarget+'" class="page" href="'+url+allPage+'" >>></a>';
     html.push('<div class="pageContainer">');
     html.push(left);
     for(var i=currentPage; i<=allPage; i++) {
      html.push('<a href="'+url+i+'" target="'+pageTarget+'" class="page '+(i==currentPage&#63;"active":"")+'">'+i+'</a>');
     }
     html.push(right);
     html.push('</div>');
     self.html(html.join(''));
    };
   })();
   $(document).ready(function(){
    $('#pageContainer').pageCreate("http://localhost/&#63;page=", 5, 3, '_blank');
   });
  </script>
 </head>
 <body>
  <div class="wrapper">
   <div class="container" id="pageContainer">
   </div>
  </div>
 </body>
</html>

登入後複製

更多關於jQuery特效相關內容有興趣的讀者可查看本站專題：《jQuery常見經典特效總結》及《jQuery動畫與特效用法總結》

》

希望本文所述對大家jQuery程式設計有所幫助。