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

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

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

参数说明：

目标文件为所有奇数元素甚至当前所要点击触发事件锥齿轮为足迹元素活动_bg为点击后的足迹背景

运行效果截图如下：

在线演示地址如下：

http://demo.jb51.net/js/2015/jquery-f-baidu-page-style-codes/

具体代码如下：

！DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN ' ' http://www .w3。org/TR/XHTML 1/DTD/XHTML 1-Transitional。DTD ' html xmlns=' http://www .w3。org/1999/XHTML ' hearteta http-equiv=' Content-Type ' Content=' text/html；charset=utf-8' /title百度分页足迹/title脚本src=' http : jquery-1。7 .2 .量滴js ' type=' text/JavaScript '/脚本样式type=' text/CSS ' .第{ padd :100 px }页；zoom :1 }。{内容： }后的第：页；显示：块；高度：0;clear:both可见性：隐藏；}.页面跨度{ position : relative margin :0 2px border 3360 solid 1px # cccfloat : left }。页面跨度a { padd :2 px 5pxcursor : }指针指针；}.页面跨度I { display : block height :10 px宽度：10 px背景# ccc边界半径：50%;位置：绝对；左侧：50%;top :-20px；左边距：-5px；}.页面跨度I . active _ I {背景：红色；}/style脚本类型=' text/JavaScript ' $(文档)。ready(function(){ function page style(obj，even，bg，active_bg){ /*参数说明：obj为所有奇数元素甚至当前所要点击触发事件锥齿轮为足迹元素活动_bg为点击后的足迹背景作者：zoowar */$(obj).css('top '，'-30px ')；$(偶数)。单击(function(){ $(this)).兄弟姐妹addClass(active_bg).父项()。兄弟姐妹()。查找(英国).移除CLaSS(active _ BG)；}) } pageStyle(' .第I :页偶数','。第a页，‘我’，‘active _ I’)；})/脚本/标题dydiv class=' page ' spana上一页/a/span span a1/ai class=' active _ I '/I/span span a2/ai/I/span span a3/ai/I/span span a4/ai/I/span span a5/ai/I/span span a6/ai/I/span span a7/ai/I/span span A8/ai/I/span a9/ai/I/span span a下一页/a/span/div/body/html希望本文所述对大家jQuery程序设计有所帮助。