| javascript+CSS实现层的平移及动态显示 |
| 责任编辑:admin 更新日期:2005-8-6 |
y: Arial; font-weight: bold;">
<tr>
<td>
<IMG src="images/wuxia.gif" width="60" height="60" border="0" alt="" hspace="10" vspace="10">
</td>
<td>
<IMG ID="Manage" src="images/wuxia1.gif" width="200" height="50" border="0" alt="" vspace="1">
<br>
<IMG src="images/xian.gif" width="249" height="2" border="0" alt="">
</td>
</tr>
</TABLE>
</DIV>
</A><A target="_self" href="wangluo/default.htm" onclick="top.TopMain.Main.location='wangluo/default.htm'" onmouseOver="javascript:document.all.Menu3.filters.alpha.opacity = 100;" onmouseOut="javascript:document.all.Menu3.filters.alpha.opacity = 50;">
<DIV ID="Menu3" style="position:absolute; top:-210; left:260; z-index:-2;filter:alpha(opacity=50);cursor:hand;">
<TABLE border="0" cellspacing="0" cellpadding="0" style="font-size: 12; font-family: Arial; font-weight: bold;">
<tr>
<td>
<IMG src="images/wangluo.gif" width="60" height="60" border="0" alt="" hspace="10" vspace="10">
</td>
<td>
<IMG ID="Manage" src="images/wangluo1.gif" width="200" height="50" border="0" alt="" vspace="1">
<br>
<IMG src="images/xian.gif" width="249" height="2" border="0" alt="">
</td>
</tr>
</TABLE>
</DIV>
</A><A target="_self" href="kaixin/default.htm" onclick="top.TopMain.Main.location='kaixin/default.htm'" onmouseOver="javascript:document.all.Menu4.filters.alpha.opacity = 100;" onmouseOut="javascript:document.all.Menu4.filters.alpha.opacity = 50;">
<DIV ID="Menu4" style="position:absolute; top:-100; left:260; z-index:-2;filter:alpha(opacity=50);cursor:hand;">
<TABLE border="0" cellspacing="0" cellpadding="0" style="font-size: 12; font-family: Arial; font-weight: bold;">
<tr>
<td>
<IMG src="images/kaixin.gif" width="60" height="60" border="0" alt="" hspace="10" vspace="10">
</td>
<td>
<IMG ID="Manage" src="images/kaixin1.gif" width="200" height="50" border="0" alt="" vspace="1">
<br>
<IMG src="images/xian.gif" width="249" height="2" border="0" alt="">
</td>
</tr>
</TABLE>
</DIV>
</A>
</td>
</tr>
</table>
</Body>
<!--
注1:原(M$)代码中使用"timer = window.setTimeout("openSlide();", mSec, "JavaScript");"来调用下一个过程的,个人认为没有什么意义,所以改为直接调用"openSlide()",以下均是如此。
注2:原(M$)代码中包含有调用声音的函数,本文已全部略去。
注3:原(M$)代码中鼠标悬停时调用的是另一幅图像,本文中改为更改对象的 alpha 值而得到理想的效果,下同。
注4:原(M$)代码是在 IMG 对象中说明 cursor:hand ,本文改为在 DIV 对象中说明,下同。
以上代码中可以看出,JavaScript 动态生成变量,用以随时间改变层的绝对定位坐标,以实现层的位移;而使用 CSS 的滤镜 alpha ,随时间改变对象的 alpha 值,即可实现层的动态显示。
相同的效果由 Flash 亦可实现,至于哪种方式更快些,,更加适合网页的应用,因为没有测试,所以我就不知道了~~
-->
<!--CopyRight By Cheery_Ke,04-07-2002,All Reserved-->
|
|