目前公司的网站上要用到的效果，其实也算不上什么特效，无非也就是鼠标移上某些元素后某些元素消失某些元素显示而已，中关村商城的效果页面如下：
我自己用jquery做的页面示例在以下网址中：
http://www.5mdn.com/niunantest.htm
页面代码：
我自己用jquery做的页面示例在以下网址中：
http://www.5mdn.com/niunantest.htm
页面代码：
<!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>
<title>JS特效测试</title>
<script src="js/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
// 第一次加载页面后，隐藏“第一名的小区域”，隐藏“除第一名以外其他名的大区域”
$(".ph").each(function() {
var thisObj = $(this);
thisObj.find(".ph0").eq(0).hide();
thisObj.find(".ph1:gt(0)").hide();
});
// 鼠标移到小区域上
// 该范围内的所有小区域显示，然后显示当前小区域
// 该范围内所有的大区域隐藏，然后显示与该小区域对应的大区域
$(".ph0").mouseover(function() {
var thisObj = $(this);
thisObj.parent(".ph").find(".ph0").show();
thisObj.hide();
thisObj.parent(".ph").find(".ph1").hide();
thisObj.next(".ph1").show();
});
});
</script>
<style type="text/css">
.ph
{
border: 1px solid #f00;
width: 180px;
float: left;
margin-right: 50px;
}
.ph0
{
margin-left: 5px;
margin-right: 5px;
height: 30px;
line-height: 30px;
border-bottom: 1px dashed #00f;
}
.ph1
{
height: 60px;
border-bottom: 1px dashed #00f;
margin-left: 5px;
margin-right: 5px;
padding: 5px;
background-color: #ffccff;
}
.block
{
width: 20px;
height: 20px;
line-height: 20px;
background-color: #ff0000;
color: #ffffff;
font-weight: bold;
float: left;
margin: 5px;
text-align: center;
}
</style>
</head>
<body>
<div class="ph">
<div class="ph0">
1. 排行榜第一名
</div>
<div class="ph1">
<div class="block">
1
</div>
排行榜第一名.....
</div>
<div class="ph0">
2. 排行榜第二名
</div>
<div class="ph1">
<div class="block">
2
</div>
排行榜第二名.....
</div>
<div class="ph0">
3. 排行榜第三名
</div>
<div class="ph1">
<div class="block">
3
</div>
排行榜第三名.....
</div>
<div class="ph0">
4. 排行榜第四名
</div>
<div class="ph1">
<div class="block">
4
</div>
排行榜第四名.....
</div>
<div class="ph0">
5. 排行榜第五名
</div>
<div class="ph1">
<div class="block">
5
</div>
排行榜第五名.....
</div>
</div>
<div class="ph">
<div class="ph0">
1. 论坛热贴第一名
</div>
<div class="ph1">
<div class="block">
1
</div>
论坛热贴第一名.....
</div>
<div class="ph0">
2. 论坛热贴第二名
</div>
<div class="ph1">
<div class="block">
2
</div>
论坛热贴第二名.....
</div>
<div class="ph0">
3. 论坛热贴第三名
</div>
<div class="ph1">
<div class="block">
3
</div>
论坛热贴第三名.....
</div>
<div class="ph0">
4. 论坛热贴第四名
</div>
<div class="ph1">
<div class="block">
4
</div>
论坛热贴第四名.....
</div>
<div class="ph0">
5. 论坛热贴第五名
</div>
<div class="ph1">
<div class="block">
5
</div>
论坛热贴第五名.....
</div>
</div>
</body>
</html>
