java 仿百度分页_jQuery实现的仿百度分页足迹效果代码

本文实例讲述了jQuery实现的仿百度分页足迹效果代码。分享给大家供大家参考，具体如下：

这是一个类似于百度的分页足迹效果，基于jquery，原理就是所有为奇数的足迹元素给不一样的样式而已，其它的非奇数元素就按默认的样式。

参数说明：

obj为所有奇数元素

even当前所要点击触发事件

bg为足迹元素

active_bg为点击后的足迹背景

运行效果截图如下：

在线演示地址如下：

具体代码如下：

/p>

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

百度分页足迹

.page{padding:100px 0;zoom:1}

.page:after{content:"";display:block;height:0;clear:both;visibility:hidden;}

.page span{position:relative;margin:0 2px;border:solid 1px #ccc;float:left;}

.page span a{padding:2px 5px;cursor:pointer;}

.page span i{display:block;height:10px;width:10px;background:#ccc;border-radius:50%;position:absolute;left:50%;top:-20px;margin-left:-5px;}

.page span i.active_i{background:red;}

$(document).ready(function(){

function pageStyle(obj,even,bg,active_bg){

/*参数说明：

obj为所有奇数元素

even当前所要点击触发事件

bg为足迹元素

active_bg为点击后的足迹背景

作者：zoowar

*/

$(obj).css("top","-30px");

$(even).click(function(){

$(this).siblings(bg).addClass(active_bg).parent().siblings().find(bg).removeClass(active_bg);

})

}

pageStyle(".page i:even",".page a","i","active_i");

})

上一页

1

2

3

4

5

5

6

7

8

9

下一页

希望本文所述对大家jQuery程序设计有所帮助。