?? 目前公司的網(wǎng)站上要用到的效果，其實也算不上什么特效，無非也就是鼠標移上某些元素后某些元素消失某些元素顯示而已，中關(guān)村商城的效果頁面如下：
我自己用jquery做的頁面示例在以下網(wǎng)址中：
http://www.5mdn.com/niunantest.htm
頁面代碼：
我自己用jquery做的頁面示例在以下網(wǎng)址中：
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() {
// 第一次加載頁面后，隱藏“第一名的小區(qū)域”，隱藏“除第一名以外其他名的大區(qū)域”
$(".ph").each(function() {
var thisObj = $(this);
thisObj.find(".ph0").eq(0).hide();
thisObj.find(".ph1:gt(0)").hide();
});
// 鼠標移到小區(qū)域上
// 該范圍內(nèi)的所有小區(qū)域顯示，然后顯示當前小區(qū)域
// 該范圍內(nèi)所有的大區(qū)域隱藏，然后顯示與該小區(qū)域?qū)?yīng)的大區(qū)域
$(".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>
更多文章、技術(shù)交流、商務(wù)合作、聯(lián)系博主
微信掃碼或搜索：z360901061
微信掃一掃加我為好友
QQ號聯(lián)系： 360901061
您的支持是博主寫作最大的動力，如果您喜歡我的文章，感覺我的文章對您有幫助，請用微信掃描下面二維碼支持博主2元、5元、10元、20元等您想捐的金額吧，狠狠點擊下面給點支持吧，站長非常感激您！手機微信長按不能支付解決辦法：請將微信支付二維碼保存到相冊，切換到微信，然后點擊微信右上角掃一掃功能，選擇支付二維碼完成支付。
【本文對您有幫助就好】元
