一种细腻的导航效果的制作方法

张生明abc

张生明abc

2016-02-19 13:29

下面是个简单易学的一种细腻的导航效果的制作方法教程,图老师小编详细图解介绍包你轻松学会,喜欢的朋友赶紧get起来吧!

  一般的导航效果大家都很熟悉了,例如用CSS给导航文本设置上、下划线、背景颜色或位移等。

  闲来无事,尝试在dw中实现同样的导航效果。

  首先分析效果的组成,鼠标经过时背景发生变化,小图象转动。Ok!考虑使用dw中的swap image(翻转图)+背景图象变化(CSS定义)应该可以实现效果。

(本文来源于图老师网站,更多请访问https://m.tulaoshi.com/webkaifa/)

  准备4张gif图象分别为:

  鼠标经过时的背景图象(在fw中使用animate可以很简单的实现渐变效果,本图象透明度由0%渐变到100%)

  

  鼠标划出时的背景图象(本图象透明度由100%渐变到0%)

  

  动态小图象

  

  静止小图象(在fw中设置图象格式为gif后保存即可)

  

  1.背景效果实现

  使用CSS定义两个类:

  .style1 { background-image: url(bg.gif)}

  .style2 { background-image: url(b.gif)}

  分别用于鼠标经过和划出时的背景图象

  然后在单元格中添加如下代码:

  onmouseover="this.className='style1'"

(本文来源于图老师网站,更多请访问https://m.tulaoshi.com/webkaifa/)

  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)"

  修改翻转图的name为不同的值即可。

  3.这个例子的技术含量并不是很高;而且偶不是很熟悉flash,不知道制作起来用dw或flash哪种更简单一些,这里提出来只是给大家提供一种解决问题的方法。

  4.两个简单效果的叠加就可以制作出比较酷的效果,希望对大家能有所启示

  补充一点:制作动画背景图象时,为实现效果,需要设置gif动画的循环为no looping(不循环)

展开更多 50%)
分享

猜你喜欢

一种细腻的导航效果的制作方法

Web开发
一种细腻的导航效果的制作方法

网页设计:一种细腻的导航效果的制作方法

Html CSS布局 Div+CSS XHTML
网页设计:一种细腻的导航效果的制作方法

s8lol主宰符文怎么配

英雄联盟 网络游戏
s8lol主宰符文怎么配

细腻的导航效果的制作方法

Web开发
细腻的导航效果的制作方法

一种反转片效果的制作方法

PS PS教程
一种反转片效果的制作方法

lol偷钱流符文搭配推荐

英雄联盟 网络游戏
lol偷钱流符文搭配推荐

一种艺术效果!

PS PS教程
一种艺术效果!

Photoshop把照片制作成一种灵幻效果

PS PS基础 ps平面设计教程 ps去水印教程
Photoshop把照片制作成一种灵幻效果

lolAD刺客新符文搭配推荐

英雄联盟
lolAD刺客新符文搭配推荐

Access如何制作复杂报表

Access如何制作复杂报表

网页中的平衡、对比、连贯和留白

网页中的平衡、对比、连贯和留白
下拉加载更多内容 ↓