jQuery仿百度分页足迹效果

时间：2016-04-10 20:27 来源：12图资源库作者：12too.com 浏览：次收藏挑错推荐打印

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>百度分页足迹</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
<style type="text/css">
.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;}
</style>
<script type="text/javascript">
$(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");
 })
</script>
</head>
 
<body>
若无效果，请刷新！
<div class="page">
 <a>上一页</a>
 <a>1</a>
 <a>2</a>
 <a>3</a>
 <a>4</a>
 <a>5</a>
 <a>5</a>
 <a>6</a>
 <a>7</a>
 <a>8</a>
 <a>9</a>
 <a>下一页</a>
</div>
</body>
</html>

运行代码保存代码复制代码提示：您可以先修改部分代码再运行，保存代码功能在Firefox下无效。

下载说明：

1、如有不能下载的情况，请点击下载报错告知我们，谢谢！

2、同时下载多个文件，容易出现无法解压情况。请下载完成一个文件后再下载另一个。

3、节约资源，有部分PSD文件已关闭全部图层，下载后使用Photoshop打开图层即可。

4、本站的所有资源除特殊说明（均来自互联网）仅供学习与参考，请勿用于商业用途。

一个类似于百度的分页足迹效果，基于jquery，原理就是所有为奇数的足迹元素给不一样的样式而已，其它的非奇数元素就按默认的样式。
　　参数说明：
　　obj为所有奇数元素
　　even当前所要点击触发事件
　　bg为足迹元素
　　active_bg为点击后的足迹背景

标签：12图资源库