jQuery+css实现的换页标签栏效果

前端技术 2023/09/08 JavaScript

本文实例讲述了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?\"\":\"\"
      prevPage = currentPage > 1 ? currentPage - 1 : 0,
      nextPage = currentPage < allPage ? currentPage + 1 : 0
      left = \'<a target=\"\'+pageTarget+\'\" class=\"page\" href=\"\'+url+\'1\"><<</a><a target=\"\'+pageTarget+\'\" href=\"\'+(prevPage==0?\"javascript:void(0)\":url+prevPage)+\'\" class=\"page\"><</a>\',
      right = \'<a target=\"\'+pageTarget+\'\" href=\"\'+(nextPage==allPage?\"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?\"active\":\"\")+\'\">\'+i+\'</a>\');
     }
     html.push(right);
     html.push(\'</div>\');
     self.html(html.join(\'\'));
    };
   })();
   $(document).ready(function(){
    $(\'#pageContainer\').pageCreate(\"http://localhost/?page=\", 5, 3, \'_blank\');
   });
  </script>
 </head>
 <body>
  <div class=\"wrapper\">
   <div class=\"container\" id=\"pageContainer\">
   </div>
  </div>
 </body>
</html>

更多关于jQuery特效相关内容感兴趣的读者可查看本站专题：《jQuery常见经典特效汇总》及《jQuery动画与特效用法总结》

希望本文所述对大家jQuery程序设计有所帮助。

本文地址：https://www.stayed.cn/item/22182

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案