文歌随笔（Aven's Blog）

致"文歌"所有朋友:
　　
　　今天，“文歌随笔”已经走了十个年头。很庆幸，他还在，近期我会抽些时间对内容进行调整，感谢大家的支持！谢谢！
----黑蝙蝠（QQ：67858601）2015.05.08

English Sentence Loading...

英语句子加载中...

网站消息：增加二维码扫描功能，扫一扫可以使用手机浏览！2015.05.13
网站消息：关闭原有评论和留言系统，加入第三评论系统-友言！2015.05.12
网站消息：尝试着对博客进行调整，尽量更新，敬请关注！2015.05.08

1.申请“友情链接”的朋友请到这里 2.留言板| 亲，请点这里给我留言吧

技术┊网站设计

[特效]仿淘宝首页商品分类列表效果

作者:黑蝙蝠日期:2009-04-02

字体大小: 小中大

分享到：微信 QQ好友新浪微博腾讯微博复制网址更多

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

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

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

HTML代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "<a href="http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" target="_blank" rel="external">http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd</a>">
<html xmlns="<a href="http://www.w3.org/1999/xhtml" target="_blank" rel="external">http://www.w3.org/1999/xhtml</a>">
<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 全部选择提示：你可先修改部分代码，再按运行]

分享到：微信 QQ好友新浪微博腾讯微博复制网址更多