利用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>

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>

简单的预览效果：