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

2019-11-20 10:40:45

字体：大中小

来源：转载

供稿：网友

本文实例讲述了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程序设计有所帮助。

上一篇：javascript中的3种继承实现方法

下一篇：js实现的彩色方块飞舞奇幻效果