当前页面: 开发资料首页 → Javascript 专题 → 如何制作鼠标感应动画菜单

如何制作鼠标感应动画菜单

摘要: 如何制作鼠标感应动画菜单

许多网友问：鼠标移上去会变亮的菜单是怎么制作的？其实这是用两张图片交替显示的效果，具体采用javascript脚本语言实现。因为稍微复杂些，需要细细讲解。
　　你要制作这种效果的话，首先也要制作好同样大小，不同效果的两张图片（先作好一张，再复制出另一张，再作其他效果，这样可以保证图片完全吻合）。
　　然后将下面的Javascript代码加入到HTML的<head></head>之间
　　<script language=JavaScript>
// Author: Alone ^_^;
// Date: 08.26.98
// Hide from non-javascript compatible browser
j=document.images;

if (j)

{
button00=new Image(); button00.src=../images/2.gif;
button001=new Image(); button001.src=../images/21.gif;
button01=new Image(); button01.src=../images/3.gif;
button011=new Image(); button011.src=../images/31.gif;
button02=new Image(); button02.src=../images/4.gif;
button021=new Image(); button021.src=../images/41.gif;
button03=new Image(); button03.src=../images/5.gif;
button031=new Image(); button031.src=../images/51.gif;
button04=new Image(); button04.src=../images/6.gif;
button041=new Image(); button041.src=../images/61.gif;
}

function img_act(p)
{if (j) {on = eval (p + 1.src);
document[p].src = on;}
}

function img_inact(p)
{if (j) {off = eval (p + .src);
document[p].src = off;
}
}
// </script>

　　只可以将其中类似“../images/2.gif” 的语句修改为你的图片名和路径名，其他不要改动。再将下面的代码放入<body></body>之间：
<table border=0 width=100% cellspacing=0 cellpadding=0>
<tr>
<td width=100% bgcolor=#000000>

</td>
</tr>
<tr>
<td width=100% bgcolor=#000000>

</td>
</tr>
</table>

　　将其中类似的语句改为你需要链接的文件名；类似img src=../images/6.gif的语句改为你的图片名和路径名；类似WIDTH=130 HEIGHT=25的语句改为你的图片的宽和高。

↑返回目录
前一篇: javascript技巧--如何制作移动的浮动层
后一篇: 强制输出变数