[html]代码库
<!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为点击后的足迹背景
2012-9-2
作者：zoowar
Email:zoowar@qq.com
博客：www.dayday28.com
*/
$(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"> <span><a>上一页</a></span> <span><a>1</a><i class="active_i"></i></span> <span><a>2</a><i></i></span> <span><a>3</a><i></i></span> <span><a>4</a><i></i></span> <span><a>5</a><i></i></span> <span><a>5</a><i></i></span> <span><a>6</a><i></i></span> <span><a>7</a><i></i></span> <span><a>8</a><i></i></span> <span><a>9</a><i></i></span> <span><a>下一页</a></span> </div>
</body>
</html>
[代码运行效果截图]
会python真的可以为所欲为0(回)
10天前
这里还有人吗1(回)
195天前
每天面对着电脑屏幕，敲打键盘。我所面对的并不只是代码，而是一种生活方式。0(回)
420天前
鸽子
0(回)
504天前
高级设计师
by: 神马 发表于：2012-09-08 22:59:46 顶(1) | 踩(0) 回复
需要把背景改为那几个脚印图片！！！
网友回复
回复神马 ： 谷歌的是中间全部o ，两旁分别是g和gle。
顶(1) 踩(0) 2012-09-08 23:00:48
回复评论