创建动易滚动门的CSS和JavaScript实现

第一步：制作两个图片，分别为menu_bottom1.gif及menu_bottom2.gif，其中menu_bottom1.gif为未触发时显示的图片，menu_bottom2.gif为鼠标触发时显示的图片。



第二步：在您的CSS文件当中，加入以下的CSS定义代码。（系统设置--》网站风格管理---》修改风格）
/* 滑门代码标签 */
.menu_bottom1{width:94px;height:29px;background:url(\Skin\Ocean\menu_bottom1.gif);font-weight: normal; }
.menu_bottom2{width:94px;height:29px;background:url(\Skin\Ocean\menu_bottom2.gif);line-height: 120%;}



第三步：添加自定义标签（系统设置--》自定义标签管理--》添加静态标签）

命名为： {$MY_ 智富网滑动1} ，选择所属的标签分类（这个步骤一定要做。）

标签内容输入：

<SCRIPT language=JavaScript> var tID=0;function ShowTabs(ID){  if(ID!=tID){    TabTitle[tID].className='menu_bottom1';    TabTitle[ID].className='menu_bottom2';    Tabs[tID].style.display='none';    Tabs[ID].style.display='';    tID=ID;  }}</SCRIPT> 
  <table cellSpacing=0 cellPadding=0 width="100%" border=0>
    <tr align=middle>
      <td class=menu_bottom2 id=TabTitle onmouseover=ShowTabs(0) width=110><A href="http://www.zf119.com/Article/niugu/cangxian/Index.htm" target='_blank'>栏目一</A></td>
      <td class=menu_bottom1 id=TabTitle onmouseover=ShowTabs(1) width=110><A href="http://www.zf119.com/Article/jijinzl/Index.htm" target='_blank'>栏目二</A></td>
      <td class=menu_bottom1 id=TabTitle onmouseover=ShowTabs(2) width=94><A href="http://www.zf119.com/Article/niugu/zjdongxiang/Index.htm" target='_blank'>栏目三</A></td>
      <td background=\Skin\Ocean\menu_bottom3.gif width=60></td>
    </tr>
  </table>
  <table cellSpacing=0 cellPadding=0 width="100%" align=center border=0>
<TBODY id=Tabs>
    <tr>
      <td class=main_tdbg_282i vAlign=top height=225>