您现在的位置: 壹定发手机版 >> 教学教研 >> 教师园地 >> 教学教研正文
  动易滑动门标签制作         ★★★ 【字体:
动易滑动门标签制作
作者:转载    教学教研来源:本站原创    点击数:1234    更新时间:2014-2-10    

第一步:制作两个图片,分别为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>
<!--你要放置的肉容一,可以用动易的系统标签--></td>
</tr>
<TBODY id=Tabs style="DISPLAY: none">
<tr>
<td class=main_tdbg_282i vAlign=top height=225>
<!--你要放置的肉容二,可以用动易的系统标签--></td>
</tr>
<TBODY id=Tabs style="DISPLAY: none">
<tr>
<td class=main_tdbg_282i vAlign=top height=225>
<!--你要放置的肉容三,可以用动易的系统标签--></td>
</tr>
</table>

第四步:好了,完成了,接下来,只要在你的首页模版,或想置入滑门效果的页面中,放入您的设定的自定义标签名:{$MY_ 智富网滑动1} ,生成首页,您就可以看到精彩效果了。


*************************************************************

如果想在同一个页面中添加多个滑门效果,只要重复第三步,第四步即可。

重复第三步时,要更改标签名,如 {$MY_ 智富网滑动2}

更改变量名:tID为t2ID,ShowTabs为ShowTabs2,TabTitle为Tab2Title,Tabs为Tabs2,(在<script 脚本语言中 )

更 改变量名:TabTitle为Tab2Title (在如下语句中,<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>)


多个滑门效果,第三个,第四个只要将其中的2改为3,4……就可以了。

教学教研录入:admin    责任编辑:admin 
  • 上一个教学教研:

  • 下一个教学教研:
  • 发表评论】【加入收藏】【告诉好友】【打印此文】【关闭窗口
    最新热点 最新推荐 相关文章
    没有相关教学教研
      网友评论:(只显示最新10条。评论内容只代表网友观点,与本站立场无关!)