本日志标题：仿淘宝首页商品分类列表效果 [2009-1-19]

客户强烈要求使用淘宝的首页商品分类效果，很BT~，没辙就满足一下人家的需求。

通过淘宝案例，立即想到了显示/隐藏层的效果，于是在DW中画了几个APDIV元素，通过【行为】制作了动作事件：鼠标移动至某区域，显示“分类”更多的层，鼠标移出就隐藏该层，这是核心方案。

调试完成之后用表格好好重新编辑了一下，顺便借用了之前的“选项卡”工具，拼凑了一个满足给用户

有需要的朋友可以研究研究。

<!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=gb2312" />
<title>仿淘宝首页商品分类列表效果</title>
<style type="text/css">
<!--
body {
    font-size: 12px;
}

#shone1,#shtwo1 {
    text-align: center;
    padding: 9px;
}
.huixuxian {
    border-bottom-width: 1px;
    border-bottom-style: dashed;
    border-bottom-color: #CCCCCC;
}
.huixuxian ul {
    margin: 0px;
    padding: 0px;
    list-style-type: none;
}
.huixuxian li {
    padding-top: 2px;
    padding-bottom: 2px;
    margin-top: 2px;
    margin-bottom: 2px;
    background-color: #F3F3F3;
}
.huixuxian li.hover {
    border-bottom-width: 2px;
    border-bottom-style: solid;
    border-bottom-color: #FF0000;
    padding-top: 2px;
    padding-bottom: 2px;
    margin-top: 2px;
    margin-bottom: 2px;
    border-top-width: 2px;
    border-left-width: 2px;
    border-top-style: solid;
    border-left-style: solid;
    border-top-color: #FF0000;
    border-left-color: #FF0000;
    background-color: #FFFFFF;
}
#apDiv1,#apDiv4 {
    position:absolute;
    z-index:3;
    visibility: hidden;
}

#apDiv3,#apDiv6 {
    position:absolute;
    z-index:2;
    border: 2px solid #FF0000;
    visibility: hidden;
    background-color: #FFFFFF;
    margin-top: 2px;
    margin-left: 0px;
}

-->
</style>

function setOut(name,cursel,n){
 for(i=1;i<=n;i++){
 var menu=document.getElementById(name+i);
 menu.className=i==cursel?"":"hover";
 }
}

</head>

<body>
<table width="700" border="0" cellspacing="0" cellpadding="0">
 <tr>
  <td width="64" class="huixuxian">
  <table width="100%" border="0" cellspacing="0" cellpadding="0">
   <tr>
    <td width="7%">
    <div id="apDiv1">
    <ul>
        <li id="shone1" onmouseover="setOver('shone',1,1);MM_showHideLayers('apDiv1','','show','apDiv2','','hide','apDiv3','','show','apDiv4','','hide','apDiv5','','show','apDiv6','','hide')" onmouseout="setOut('shone',1,1);MM_showHideLayers('apDiv1','','hide','apDiv2','','show','apDiv3','','hide','apDiv4','','hide','apDiv5','','show','apDiv6','','hide')"><br />
         数<br />码<br /><br /></li>
    </ul>
    </div>
    <ul>
        <li id="shone1" onmouseover="setOver('shone',1,1);MM_showHideLayers('apDiv1','','show','apDiv2','','hide','apDiv3','','show','apDiv4','','hide','apDiv5','','show','apDiv6','','hide')" onmouseout="setOut('shone',1,1);MM_showHideLayers('apDiv1','','hide','apDiv2','','show','apDiv3','','hide','apDiv4','','hide','apDiv5','','show','apDiv6','','hide')"><br />
         数<br />码<br /><br /></li>
    </ul>
    </td>
    <td width="93%" valign="top">
    
    <div id="apDiv3" onmouseover="setOver('shone',1,1);MM_showHideLayers('apDiv1','','show','apDiv2','','hide','apDiv3','','show','apDiv4','','hide','apDiv5','','show','apDiv6','','hide')" onmouseout="setOut('shone',1,1);MM_showHideLayers('apDiv1','','hide','apDiv2','','show','apDiv3','','hide','apDiv4','','hide','apDiv5','','show','apDiv6','','hide')">
    <table width="674" border="0" cellspacing="0" cellpadding="3">
     <tr>
      <td width="651">sss新浪基金为全球用户24小时提供全面及时的基金中文资讯，内容涵盖基金行业动态、基金 净值、基金排名、基金数据、基金评级、基金知识、基金论坛、基金超市和基金联盟等</td>
     </tr>
     <tr>
      <td>拥有丰富的新闻资讯及评论，详实的数据资料，专业的评级系统，活跃的基金经理沙龙， 火爆的论坛和博客，为您提供最优质的服务平台，是您贴心的理财参谋</td>
     </tr>
     <tr>
      <td width="651">新浪基金为全球用户24小时提供全面及时的基金中文资讯，内容涵盖基金行业动态、基金 净值、基金排名、基金数据、基金评级、基金知识、基金论坛、基金超市和基金联盟等</td>
     </tr>
     <tr>
      <td>拥有丰富的新闻资讯及评论，详实的数据资料，专业的评级系统，活跃的基金经理沙龙， 火爆的论坛和博客，为您提供最优质的服务平台，是您贴心的理财参谋</td>
     </tr>
    </table>
    </div>    
    <div id="apDiv2">
    <table width="674" border="0" cellspacing="0" cellpadding="3" onmouseover="setOver('shone',1,1);MM_showHideLayers('apDiv1','','show','apDiv2','','hide','apDiv3','','show','apDiv4','','hide','apDiv5','','show','apDiv6','','hide')" onmouseout="setOut('shone',1,1);MM_showHideLayers('apDiv1','','hide','apDiv2','','show','apDiv3','','hide','apDiv4','','hide','apDiv5','','show','apDiv6','','hide')">
     <tr>
      <td width="651">新浪基金为全球用户24小时提供全面及时的基金中文资讯，内容涵盖基金行业动态、基金 净值、基金排名、基金数据、基金评级、基金知识、基金论坛、基金超市和基金联盟等</td>
     </tr>
     <tr>
      <td>拥有丰富的新闻资讯及评论，详实的数据资料，专业的评级系统，活跃的基金经理沙龙， 火爆的论坛和博客，为您提供最优质的服务平台，是您贴心的理财参谋</td>
     </tr>
    </table>
    </div>
    </td>
   </tr>
  </table>  </td>
 </tr>
 
 <tr>
  <td class="huixuxian">
  <table width="100%" border="0" cellspacing="0" cellpadding="0">
   <tr>
    <td width="7%">
    <div id="apDiv4">
    <ul>
        <li id="shtwo1" onmouseover="setOver('shtwo',1,1);MM_showHideLayers('apDiv1','','hide','apDiv2','','show','apDiv3','','hide','apDiv4','','show','apDiv5','','hide','apDiv6','','show')" onmouseout="setOut('shtwo',1,1);MM_showHideLayers('apDiv1','','hide','apDiv2','','show','apDiv3','','hide','apDiv4','','hide','apDiv5','','show','apDiv6','','hide')"><br />
         服<br />装<br /><br /></li>
    </ul>
    </div>
    <ul>
        <li id="shtwo1" onmouseover="setOver('shtwo',1,1);MM_showHideLayers('apDiv1','','hide','apDiv2','','show','apDiv3','','hide','apDiv4','','show','apDiv5','','hide','apDiv6','','show')" onmouseout="setOut('shtwo',1,1);MM_showHideLayers('apDiv1','','hide','apDiv2','','show','apDiv3','','hide','apDiv4','','hide','apDiv5','','show','apDiv6','','hide')"><br />
         服<br />装<br /><br /></li>
    </ul>
    </td>
    <td width="93%" valign="top">
    
    <div id="apDiv6" onmouseover="setOver('shtwo',1,1);MM_showHideLayers('apDiv1','','hide','apDiv2','','show','apDiv3','','hide','apDiv4','','show','apDiv5','','hide','apDiv6','','show')" onmouseout="setOut('shtwo',1,1);MM_showHideLayers('apDiv1','','hide','apDiv2','','show','apDiv3','','hide','apDiv4','','hide','apDiv5','','show','apDiv6','','hide')">
    <table width="674" border="0" cellspacing="0" cellpadding="3">
     <tr>
      <td width="651">太平洋女性网服饰频道提供海量时尚服饰资讯,服装新品上市一手资料,教你各类服装搭配的方案,打造属于你自己的魔鬼身材，完美身材</td>
     </tr>
     <tr>
      <td>服装品牌,服装品牌排行榜,服装品牌大全,服装品牌排行榜__买服装先上品牌世家网. ... 戴菲菲为代言安踏女子时尚系列服装拍摄写真精美图</td>
     </tr>
     <tr>
      <td width="651">太平洋女性网服饰频道提供海量时尚服饰资讯,服装新品上市一手资料,教你各类服装搭配的方案,打造属于你自己的魔鬼身材，完美身材</td>
     </tr>
     <tr>
      <td>服装品牌,服装品牌排行榜,服装品牌大全,服装品牌排行榜__买服装先上品牌世家网. ... 戴菲菲为代言安踏女子时尚系列服装拍摄写真精美图</td>
     </tr>
     <tr>
      <td width="651">太平洋女性网服饰频道提供海量时尚服饰资讯,服装新品上市一手资料,教你各类服装搭配的方案,打造属于你自己的魔鬼身材，完美身材</td>
     </tr>
    </table>
    </div>    
    <div id="apDiv5">
    <table width="674" border="0" cellspacing="0" cellpadding="3" onmouseover="setOver('shtwo',1,1);MM_showHideLayers('apDiv1','','hide','apDiv2','','show','apDiv3','','hide','apDiv4','','show','apDiv5','','hide','apDiv6','','show')" onmouseout="setOut('shtwo',1,1);MM_showHideLayers('apDiv1','','hide','apDiv2','','show','apDiv3','','hide','apDiv4','','hide','apDiv5','','show','apDiv6','','hide')">
     <tr>
      <td width="651">太平洋女性网服饰频道提供海量时尚服饰资讯,服装新品上市一手资料,教你各类服装搭配的方案,打造属于你自己的魔鬼身材，完美身材</td>
     </tr>
     <tr>
      <td>服装品牌,服装品牌排行榜,服装品牌大全,服装品牌排行榜__买服装先上品牌世家网. ... 戴菲菲为代言安踏女子时尚系列服装拍摄写真精美图</td>
     </tr>
    </table>
    </div>    </td>
   </tr>
  </table>  </td>
 </tr>
</table>
</body>
</html>

[Ctrl+A 全部选择进行拷贝提示：可先修改部分代码，再点击运行]
在百度搜索完整的仿淘宝首页商品分类列表效果内容，或者用Google搜索相关的更多内容

By [cnbruce] at 12:08:30 | 评论 [5] | 浏览 [20019] | TrackBack| 返回顶部

9 如何用CSS实现图像替换链接文... :篇一上

下一篇: Javascript getY... :