当前位置:文档之家› 鼠标事件:鼠标点击出现下拉菜单,很基础的一个特效。

鼠标事件:鼠标点击出现下拉菜单,很基础的一个特效。

鼠标事件:鼠标点击出现下拉菜单,很基础的一个特效。

先上代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="/1999/xhtml">
<head>
<META http-equiv=Content-Type content="text/html; charset=gb2312"> <SCRIPT language=javascript>
var intDelay = 30; //设置菜单显示速度,越大越慢
var intInterval = 5;
function MenuClick() {
if (LayerMenu.style.display == "") {
GradientClose();
}
else {
LayerMenu.filters.alpha.opacity = 0; LayerMenu.style.display = ""; GradientShow();
}
}
function GradientShow() {
LayerMenu.filters.alpha.opacity += intInterval;
if (LayerMenu.filters.alpha.opacity < 100) setTimeout("GradientShow()", intDelay);
}
function GradientClose() {
LayerMenu.filters.alpha.opacity -= intInterval; if (LayerMenu.filters.alpha.opacity > 0) {
setTimeout("GradientClose()", intDelay);
}
else {
LayerMenu.style.display = "none"; }
}
</SCRIPT> <STYLE type=text/css>A
{ FONT-SIZE: 10px; COLOR: #666666; LINE-HEIGHT: 16px; FONT-FAMILY: "tahoma"; TEXT-DECORATION: none }
TD
{ FONT-SIZE: 10px; COLOR: #999999; LINE-HEIGHT: 16px; FONT-FAMILY: "tahoma" }
</STYLE> <META content="MSHTML 5.50.4134.600" name=GENERATOR> </head>
<body text=#000000 bgColor=#ffffff>
<DIV id=LayerMenu style="DISPLAY: none; Z-INDEX: 4; FILTER: alpha(opacity=0); LEFT: 8px; WIDTH: 68px; POSITION: absolute; TOP: 33px">
<TABLE cellSpacing=1 cellPadding=0 width=100 bgColor=#999999 border=0>
<TBODY>
<TR> <TD bgColor=#ffffff> <DIV align=center><a href="" target="_blank"><embed src="\Me\img\new\images\music.swf" width="100px" height="100px"
border="0"></embed></a></DIV></TD></TR>
<TR> <TD bgColor=#ffffff></TD></TR>
<TR> <TD bgColor=#ffffff> <DIV align=center><a href="" target="_blank"><embed src="\Me\img\new\images\map.swf" width="100px" height="100px"
border="0"></embed></a></DIV></TD></TR>
<TR> <TD bgColor=#ffffff></TD></TR>
<TR> <TD bgColor=#ffffff> <DIV align=center><a href="" target="_blank"><embed src="\Me\img\new\images\movie.swf" width="100px" height="100px"
border="0"></embed></a></DIV></TD></TR>
<TR> <TD bgColor=#ffffff></TD></TR>
<TR> <TD bgColor=#ffffff> <DIV align=center><a href="" target="_blank"><embed src="\Me\img\new\images\void.swf" width="100px" height="100px"
border="0"></embed></a></DIV></TD></TR></TBODY></TABLE></DIV>
<A onfocus=this.blur() onclick=MenuClick() href="#"><img
src="img/images/music.png" width="30px" height="30px" border="0"></A>
</body>
</html>
下面是我相对更改的地方。

<A onfocus=this.blur() onclick=MenuClick() href="#"><img
src="img/images/music.png" width="30px" height="30px" border="0"></A>
你点击的东西。

<TR> <TD bgColor=#ffffff> <DIV align=center><a href="" target="_blank"><embed src="\Me\img\new\images\movie.swf" width="100px" height="100px"
border="0"></embed></a></DIV></TD></TR>
这一句出现了好几遍,是菜单栏里每一栏的代码,可以加入图片,文字和其他多媒体文件。

字头部分是整体事件的代码。

*************************************************
下面是效果展示:
没有点击的时候(我的点击东西是一张图片):
点开以后的效果:。

相关主题