- <!DOCTYPE html>
- <html>
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
- <script src1="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
- <title>jQuery模拟百度搜索分页脚印效果</title>
- <style type="text/CSS">
- #page
- {
- font: 14px simsun;
- white-space: nowrap;
- }
- p, form, ol, ul, li, dl, dt, dd, h3
- {
- margin: 0;
- padding: 0;
- list-style: none;
- }
- #page a, #page strong
- {
- display: inline-block;
- vertical-align: text-bottom;
- height: 54px;
- text-align: center;
- line-height: 22px;
- text-decoration: none;
- overflow: hidden;
- margin-right: 5px;
- background: white;
- }
- #page a
- {
- cursor: pointer;
- }
- #page .fk
- {
- width: 24px;
- height: 30px;
- background: url( "http://s1.bdstatic.com/r/www/cache/global/img/bg-1.0.4.png" ) -35px -309px no-repeat;
- cursor: pointer;
- }
- #page .pc
- {
- width: 22px;
- height: 22px;
- border: 1px solid #E7ECF0;
- cursor: pointer;
- }
- #page span
- {
- display: block;
- }
- #page .n
- {
- height: 22px;
- padding: 0 6px;
- border: 1px solid #E7ECF0;
- }
- #page .fk_cur
- {
- background-position: 2px -312px;
- }
- #page strong .pc
- {
- border: 0;
- width: 24px;
- height: 24px;
- line-height: 24px;
- }
- #page .fkd {
- background-position: -35px -303px;
- }
- #page .n:hover, #page a:hover .pc
- {
- background: #EBEBEB;
- }
- </style>
- <script type="text/javascript">
- $(function () {
- $("#page a").each(function () {
- $(this).on("click", function () {
- var p = $("#page strong").find("span.pc").html();
- $("#page strong").replaceWith("<a><span class=\\"fk\\"></span><span class=\\"pc\\">" + p + "</span></a>")
- var t = $(this).find("span.pc").html();
- $(this).replaceWith("<strong><span class=\\"fk fk_cur\\"></span><span class=\\"pc\\">" + t + "</span></strong>");
- });
- });
- });
- </script>
- </head>
- <body>
- <div>
- <p id="page">
- <a href="javascript:;" class="n"><上一页</a>
- <a href="javascript:;">
- <span class="fk"></span><span class="pc">5</span>
- </a>
- <a href="javascript:;">
- <span class="fk fkd"></span><span class="pc">6</span>
- </a>
- <a href="javascript:;">
- <span class="fk"></span><span class="pc">7</span>
- </a>
- <a href="javascript:;">
- <span class="fk fkd"></span><span class="pc">8</span>
- </a>
- <a href="javascript:;">
- <span class="fk"></span><span class="pc">9</span>
- </a>
- <a href="javascript:;">
- <span class="fk fkd"></span><span class="pc">10</span>
- </a>
- <a href="javascript:;">
- <span class="fk"></span><span class="pc">11</span>
- </a>
- <a href="javascript:;">
- <span class="fk fkd"></span><span class="pc">12</span>
- </a>
- <a href="javascript:;">
- <span class="fk"></span><span class="pc">13</span></a>
- <a href="javascript:;">
- <span class="fk fkd"></span><span class="pc">14</span>
- </a>
- <strong>
- <span class="fk fk_cur"></span><span class="pc">15</span>
- </strong>
- <a href="javascript:;">
- <span class="fk fkd"></span><span class="pc">16</span>
- </a>
- <a href="javascript:;">
- <span class="fk"></span><span class="pc">17</span>
- </a>
- <a href="javascript:;">
- <span class="fk fkd"></span><span class="pc">18</span>
- </a>
- <a href="javascript:;">
- <span class="fk"></span><span class="pc">19</span></a>
- <a href="javascript:;">
- <span class="fk fkd"></span><span class="pc">20</span>
- </a>
- <a href="javascript:;">
- <span class="fk"></span><span class="pc">21</span>
- </a>
- <a href="javascript:;">
- <span class="fk fkd"></span><span class="pc">22</span>
- </a>
- <a href="javascript:;">
- <span class="fk"></span><span class="pc">23</span>
- </a>
- <a href="javascript:;">
- <span class="fk fkd"></span><span class="pc">24</span>
- </a>
- <a href="javascript:;" class="n">下一页></a>
- </p>
- </div>
- </body>
- </html>
- //该片段来自于http://www.codesnippet.cn/detail/020820134942.html
来源: http://www.codesnippet.cn/detail/020820134942.html