jQuery仿百度分页足迹效果

时间：2012-09-10 16:45 来源：互联网作者：后浪浏览：次收藏挑错推荐打印

<!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下无效。

一个类似于百度的分页足迹效果，基于jquery，原理就是所有为奇数的足迹元素给不一样的样式而已，其它的非奇数元素就按默认的样式。
　　参数说明：
　　obj为所有奇数元素
　　even当前所要点击触发事件
　　bg为足迹元素
　　active_bg为点击后的足迹背景 jQuery仿百度分页足迹效果由源码搜藏网整理,转载请注明出处http://www.codesocang.com/texiao/wangzhan/605.html

jQuery仿百度分页足迹效果

网页特效