jQuery+css实现的换页标签栏效果
2016-01-27 11:02
856 查看
本文实例讲述了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程序设计有所帮助。
您可能感兴趣的文章:
相关文章推荐
- JQuery1——基础($对象,选择器,对象转换)
- Web布局连载——两栏固定布局(五)
- JavaScript演示排序算法
- 2015-2016网页设计趋势分析 Web Design of Trends
- jQuery Ajax 跨域调用
- 移动端的长按事件
- jquery教程靠边站,一分钱不花让你免费学会jquery
- JQuery+Strusts1.x无刷新登录
- [div+css]晒晒最新制作专题推广页模板
- JavaScript 各种遍历方式详解
- 数组方法汇总
- 设计更快的网页(三):字体和 CSS 调整
- 纯CSS制作的新闻网站中的文章列表
- 10条影响CSS渲染速度的写法与使用建议第1/3页
- BS项目中的CSS架构_仅加载自己需要的CSS
- 很不错的 CSS Hack 又学了一招
- 发一个css比较清爽的写法
- CSS expression控制图片自动缩放效果代码[兼容 IE,Firefox]
- css布局网页水平居中常用方法
- CSS经典技巧十则第1/2页