利用jQuery和css實現的模仿百度搜索列表頁面的分頁的足跡效果

   主要運用css的border屬性來實現三角形，jQuery實現切換和選中的效果：

html代碼如下：<div class="page">

<a href=""><span>上一頁</span></a>

<a href=""><span>1</span><i></i></a>

<a href=""><span>2</span><i></i></a>

<a href=""><span>3</span><i></i></a>

<a href=""><span>4</span><i></i></a>

<a href=""><span>5</span><i></i></a>

<a href=""><span>6</span><i></i></a>

<a href=""><span>7</span><i></i></a>

<a href=""><span>8</span><i></i></a>

<a href=""><span>下一頁</span></a>

</div>

css代碼如下：

<style type="text/css">

• {
      margin:0;
      padding:0;
      font-size:12px;
  }
  .page {
      margin:110px auto;
      width:1004px;
      padding:0 10px;
  }
  .page a, .page strong {
      display:inline-block;
      position:relative;
      margin:0 5px;
      text-decoration:none;
      color:#999;
  }
  .page a span, .page strong span {
      border:1px solid #ccc;
      line-height:18px;
      padding:0 6px;
      height:18px;
  }
  .page strong span {
      font-weight:bold;
      color:#000;
  }
  .page i {
      font-style:normal;
      position:absolute;
      left:0px;
      top:-30px;
      width:0;
      height:0;
      border:10px solid #000;
      border-color: transparent transparent #FF0000 transparent;
      border-style:dashed dashed solid dashed;
      line-height:0;
      font-size:0;
  }
  .page i.current {
      border:10px solid #000;
      border-color: #CCC transparent transparent transparent;
      border-style: solid dashed dashed dashed;
  }
  </style></p>

   

  jQuery部分代碼如下：

   

  <script type="text/javascript">
  $(document).ready(function(){
      $(".page i:even").css("top", "-40px");
      $(".page a").click(function(){
          $(this).css({fontWeight:"bold",background:"#ccc",color:"#fff"}).find("i").addClass("current");
          $(this).siblings().css({fontWeight:"normal",background:"#fff",color:"#999"}).find("i").removeClass("current");
          return false;
          
          })
      })
  </script>

   

  簡單的預覽效果：