Kesan bar tab perubahan halaman dilaksanakan oleh jQuery css

Kesan bar tab perubahan halaman dilaksanakan oleh jQuery css_jquery

WBOY

Lepaskan： 2016-05-16 15:17:45

asal

1469 orang telah melayarinya

Contoh dalam artikel ini menerangkan kesan bar tab perubahan halaman yang dilaksanakan oleh jQuery css. Kongsikan dengan semua orang untuk rujukan anda, butirannya adalah seperti berikut:

Tangkapan skrin kesan berjalan adalah seperti berikut:

Kod khusus adalah seperti berikut:

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

Salin selepas log masuk

Pembaca yang berminat dengan lebih banyak kandungan yang berkaitan dengan kesan khas jQuery boleh menyemak topik khas di tapak ini: "Ringkasan kesan khas klasik biasa jQuery" dan "Ringkasan animasi jQuery dan penggunaan kesan khas"

Saya harap artikel ini akan membantu semua orang dalam pengaturcaraan jQuery.