利用jQuery和css实现的模仿百度搜索列表页面的分页的足迹效果
主要运用css的border属性来实现三角形，jQuery实现切换和选中的效果：
html代码如下：<div class="page">
<a href="http://qiuqiuyifang.taobao.com"><span>上一页</span></a>
<a href="http://qiuqiuyifang.taobao.com"><span>1</span><i></i></a>
<a href="http://qiuqiuyifang.taobao.com"><span>2</span><i></i></a>
<a href="http://qiuqiuyifang.taobao.com"><span>3</span><i></i></a>
<a href="http://qiuqiuyifang.taobao.com"><span>4</span><i></i></a>
<a href="http://qiuqiuyifang.taobao.com"><span>5</span><i></i></a>
<a href="http://qiuqiuyifang.taobao.com"><span>6</span><i></i></a>
<a href="http://qiuqiuyifang.taobao.com"><span>7</span><i></i></a>
<a href="http://qiuqiuyifang.taobao.com"><span>8</span><i></i></a>
<a href="http://qiuqiuyifang.taobao.com"><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>
简单的预览效果：
