?? 目前公司的網(wǎng)站上要用到的效果,其實(shí)也算不上什么特效,無(wú)非也就是鼠標(biāo)移上某些元素后某些元素消失某些元素顯示而已,中關(guān)村商城的效果頁(yè)面如下:
我自己用jquery做的頁(yè)面示例在以下網(wǎng)址中:
http://www.5mdn.com/niunantest.htm
頁(yè)面代碼:

我自己用jquery做的頁(yè)面示例在以下網(wǎng)址中:
http://www.5mdn.com/niunantest.htm
頁(yè)面代碼:
<!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特效測(cè)試</title> <script src="js/jquery.js" type="text/javascript"></script> <script type="text/javascript"> $(function() { // 第一次加載頁(yè)面后,隱藏“第一名的小區(qū)域”,隱藏“除第一名以外其他名的大區(qū)域” $(".ph").each(function() { var thisObj = $(this); thisObj.find(".ph0").eq(0).hide(); thisObj.find(".ph1:gt(0)").hide(); }); // 鼠標(biāo)移到小區(qū)域上 // 該范圍內(nèi)的所有小區(qū)域顯示,然后顯示當(dāng)前小區(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號(hào)聯(lián)系: 360901061
您的支持是博主寫(xiě)作最大的動(dòng)力,如果您喜歡我的文章,感覺(jué)我的文章對(duì)您有幫助,請(qǐng)用微信掃描下面二維碼支持博主2元、5元、10元、20元等您想捐的金額吧,狠狠點(diǎn)擊下面給點(diǎn)支持吧,站長(zhǎng)非常感激您!手機(jī)微信長(zhǎng)按不能支付解決辦法:請(qǐng)將微信支付二維碼保存到相冊(cè),切換到微信,然后點(diǎn)擊微信右上角掃一掃功能,選擇支付二維碼完成支付。
【本文對(duì)您有幫助就好】元
