熱點推薦:
您现在的位置: 電腦知識網 >> 編程 >> Java編程 >> JSP教程 >> 正文

如何制作鼠標感應動畫菜單

2013-11-15 11:44:50  來源: JSP教程 
許多網友問鼠標移上去會變亮的菜單是怎麼制作的?其實這是用兩張圖片交替顯示的效果具體采用javascript腳本語言實現因為稍微復雜些需要細細講解
  你要制作這種效果的話首先也要制作好同樣大小不同效果的兩張圖片(先作好一張再復制出另一張再作其他效果這樣可以保證圖片完全吻合)
  然後將下面的Javascript代碼加入到HTML的<head></head>之間
  <script language=JavaScript>
// Author: Alone ^_^;
// Date:
// Hide from nonjavascript compatible browser
j=documentimages;

if (j)

{
button=new Image(); buttonsrc=/images/gif;
button=new Image(); buttonsrc=/images/gif;
button=new Image(); buttonsrc=/images/gif;
button=new Image(); buttonsrc=/images/gif;
button=new Image(); buttonsrc=/images/gif;
button=new Image(); buttonsrc=/images/gif;
button=new Image(); buttonsrc=/images/gif;
button=new Image(); buttonsrc=/images/gif;
button=new Image(); buttonsrc=/images/gif;
button=new Image(); buttonsrc=/images/gif;
}

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

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

  只可以將其中類似/images/gif 的語句修改為你的圖片名和路徑名其他不要改動再將下面的代碼放入<body></body>之間
<table border= width=% cellspacing= cellpadding=>
<tr>
<td width=% bgcolor=#><p align=center><a onmouseover=img_act(button) onmouseout=img_inact(button)><img src=/images/gif name=button alt=Frontpage寶典 border= WIDTH= HEIGHT=></a></td>
</tr>
<tr>
<td width=% bgcolor=#><p align=center><a onmouseover=img_act(button) onmouseout=img_inact(button)><img src=/images/gif alt=Photoshop點睛 name=button border= WIDTH= HEIGHT=></a></td>
</tr>
<tr>
<td width=% bgcolor=#><p align=center><a onmouseover=img_act(button) onmouseout=img_inact(button)><img src=/images/gif name=button alt=javascript超市 border= WIDTH= HEIGHT=></a></td>
</tr>
<tr>
<td width=% bgcolor=#><p align=center><a onmouseover=img_act(button) onmouseout=img_inact(button)><img src=/images/gif name=button alt=CGI&perl天書 border= WIDTH= HEIGHT=></a></td>
</tr>
<tr>
<td width=% bgcolor=#><p align=center><a onmouseover=img_act(button) onmouseout=img_inact(button)><img src=/images/gif name=button alt=Homepage技巧 border= WIDTH= HEIGHT=></a></td>
</tr>
</table>

  將其中類似<a />的語句改為你需要鏈接的文件名類似img src=/images/gif的語句改為你的圖片名和路徑名類似WIDTH= HEIGHT=的語句改為你的圖片的寬和高
From:http://tw.wingwit.com/Article/program/Java/JSP/201311/19542.html
    推薦文章
    Copyright © 2005-2013 電腦知識網 Computer Knowledge   All rights reserved.