如何制作鼠标感应动画菜单_Web开发_学习笔记★闵涛★计算机学习电脑编程软硬件技巧


	转至繁体中文版	\| 网站首页 \| 图文教程 \| 资源下载 \| 站长博客 \| 图片素材 \| 武汉seo \| 武汉网站优化 \|

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

作者：闵涛文章来源：闵涛的学习笔记点击数：805 更新时间：2009/4/23 11:21:14

　　许多网友问：鼠标移上去会变亮的菜单是怎么制作的？其实这是用两张图片交替显示的效果，具体采用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"><p align="center"><a href="../frontpage.htm" onmouseover="img_act('button00')" onmouseout="img_inact('button00')"><img src="../images/2.gif" name="button00" alt="Frontpage宝典" border="0" WIDTH="130" HEIGHT="25"></a></td>
</tr>
<tr>
<td width="100%" bgcolor="#000000"><p align="center"><a href="../photoshop.htm" onmouseover="img_act('button01')" onmouseout="img_inact('button01')"><img src="../images/3.gif" alt="Photoshop点睛" name="button01" border="0" WIDTH="130" HEIGHT="25"></a></td>
</tr>
<tr>
<td width="100%" bgcolor="#000000"><p align="center"><a href="../javas.htm" onmouseover="img_act('button02')" onmouseout="img_inact('button02')"><img src="../images/4.gif" name="button02" alt="javascript超市" border="0" WIDTH="130" HEIGHT="25"></a></td>
</tr>
<tr>
<td width="100%" bgcolor="#000000"><p align="center"><a href="../cgi.htm" onmouseover="img_act('button03')" onmouseout="img_inact('button03')"><img src="../images/5.gif" name="button03" alt="CGI&perl天书" border="0" WIDTH="130" HEIGHT="25"></a></td>
</tr>
<tr>
<td width="100%" bgcolor="#000000"><p align="center"><a href="../homepage.htm" onmouseover="img_act('button04')" onmouseout="img_inact('button04')"><img src="../images/6.gif" name="button04" alt="Homepage技巧" border="0" WIDTH="130" HEIGHT="25"></a></td>
</tr>
</table>

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

没有相关教程

教程录入：mintao 责任编辑：mintao

上一篇教程：用JavaScript实现一些随机事件

下一篇教程： “智慧型”网页制作技巧

【字体：小大】【发表评论】【加入收藏】【告诉好友】【打印此文】【关闭窗口】

注：本站部分文章源于互联网，版权归原作者所有！如有侵权，请原作者与本站联系，本站将立即删除！本站文章除特别注明外均可转载，但需注明出处！ [MinTao学以致用网]

　网友评论：（只显示最新10条。评论内容只代表网友观点，与本站立场无关！）

同类栏目

· Web开发  · 网页制作
· 平面设计  · 网站运营
· 网站推广  · 搜索优化
· 建站心得  · 站长故事
· 互联动态

热门推荐

没有教程

赞助链接

闵涛博文

500 - 内部服务器错误。

您查找的资源存在问题，因而无法显示。

鄂公网安备 42011102001154号

站长：MinTao ICP备案号：鄂ICP备11006601号-18

闵涛站盟:医药大全-武穴网。A打造B、C、D……