一種細膩的導航效果的制作方法
2007/1/30 9:18:31
    一般的導航效果大家都很熟悉了,例如用CSS給導航文本設置上、下劃線、背景顏色或位移等。前面的帖子中有網友提到http://www.tonta.com.cn/這個網站,偶發現其首頁中的導航效果不錯,雖然flash做的沒有很眩的效果,但是比較細膩,看上去很舒服。
  閑來無事,嘗試在dw中實現同樣的導航效果。效果如下所示:http://vip.5d.cn/flood/daohang/1.htm。
  首先分析效果的組成,鼠標經過時背景發生變化,小圖象轉動。Ok!考慮使用dw中的swap image(翻轉圖)+背景圖象變化(CSS定義)應該可以實現效果。
  準備4張gif圖象分別為:
  鼠標經過時的背景圖象(在fw中褂胊nimate可以很簡單的實現漸變效果,本圖象透明度由0%漸變到100%)
[img]/conimages/web/2003-06/bg0604.gif[/img]
鼠標劃出時的背景圖象(本圖象透明度由100%漸變到0%)
[img]/conimages/web/2003-06/b0604.gif[/img]
動態小圖象
[img]/conimages/web/2003-06/20604.gif[/img]
靜止小圖象(在fw中設置圖象格式為gif后保存即可)
[img]/conimages/web/2003-06/2a0604.gif[/img] 
1.背景效果實現
  使用CSS定義兩個類: 
.style1 { background-image: url(bg.gif)}
.style2 { background-image: url(b.gif)} 
  分別用于鼠標經過和劃出時的背景圖象
  然后在單元格中添加如下代碼: 
onmouseover="this.className='style1'"
onmouseout="this.className='style2'" 
  就可以實現鼠標經過時背景漸變出現,移開后背景漸變消失的效果。
  2.翻轉圖效果實現
  在單元格中插入靜止小圖象,使用行為添加swap image效果,設置鼠標經過后翻轉為動態小圖象。
  為更貼近效果,需要把翻轉圖效果應用到單元格上,在靜止小圖象代碼中剪切如下代碼: 
onMouseOver="MM_swapImage('Image2','','2.GIF',1)"
onMouseOut="MM_swapImgRestore()" 
  粘貼到單元格代碼td標簽中。
  就可以實現鼠標經過單元格時圖象翻轉,產生動態的效果。
  至此即可實現全部的效果。
  在這個例子中,使用dw實現的效果幾乎可以與flash制作的效果媲美,甚至更好一點(我們實現了鼠標劃出單元格時背景漸變消失的效果)。
  小節:
  1.在fw中精心制作漸變的背景圖象(我只是隨便做了兩個漸變圖象)+對導航單元格修飾可以使效果更加細膩,出色;
  2.在使用該方法制作導航效果時,需要使用到多個單元格,注意swap效果不能被拷貝,拷貝代碼后需要修改兩處代碼: 
onMouseOver="MM_swapImage('Image3','','2.GIF',1)"
<img src="2a.gif" name="Image3" width="15" height="15" border="0" id="Image3"> 
  修改翻轉圖的name為不同的值即可。
  3.這個例子的技術含量并不是很高;而且偶不是很熟悉flash,不知道制作起來用dw或flash哪種更簡單一些,這里提出來只是給大家提供一種解決問題的方法。
  4.兩個簡單效果的疊加就可以制作出比較酷的效果,希望對大家能有所啟示
補充一點:制作動畫背景圖象時,為實現效果,需要設置gif動畫的循環為no looping(不循環)
:)

返回列表
返回首頁 主站蜘蛛池模板: 又粗又长又色又爽视频| 国产超爽人人爽人人做| 久久大香伊人中文字幕| 欧美日韩在线不卡| 午夜性色吃奶添下面69影院| 麻豆亚洲AV成人无码久久精品| 国内精品人妻无码久久久影院导航 | 香蕉免费在线视频| 好男人www社区视频在线| 久久丫精品久久丫| 日韩精品视频美在线精品视频| 亚洲熟妇无码乱子av电影| 精品人无码一区二区三区| 国产亚洲综合色就色| 免费成人福利视频| 国产精品美女视频| 99爱在线视频这里只有精品 | 人妻精品久久久久中文字幕 | 久久99国产精品尤物| 日韩精品无码一本二本三本| 亚洲国产精品yw在线观看| 激情综合色五月六月婷婷| 免费观看日本污污ww网站一区| 色噜噜噜噜噜在线观看网站| 国产原创中文字幕| 国产精品va一级二级三级| 国产精品免费观看| 91人人区免费区人人| 大胸喷奶水的www的视频网站| 一个人看的www免费高清中文字幕| 成人欧美精品大91在线| 久久中文字幕2021精品| 日本精品久久久久中文字幕| 久久精品日日躁夜夜躁欧美| 欧美va亚洲va在线观看| 亚洲成a人片77777群色| 欧美高清在线精品一区| 亚洲电影在线免费观看| 波多野结衣医生| 亚洲色偷偷偷综合网| 牛牛在线精品免费视频观看|