| 一种细腻的导航效果的制作方法 |
| 日期:2006-10-8 15:51:30 人气: [大 中 小] |
| 一般的导航效果大家都很熟悉了,例如用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.背景效果实现 .style1 { background-image: url(bg.gif)} 分别用于鼠标经过和划出时的背景图象 onmouseover="this.className='style1'" 就可以实现鼠标经过时背景渐变出现,移开后背景渐变消失的效果。 onMouseOver="MM_swapImage('Image2','','2.GIF',1)" 粘贴到单元格代码td标签中。 onMouseOver="MM_swapImage('Image3','','2.GIF',1)" 修改翻转图的name为不同的值即可。 |
| 出处:CnCode转载收集 作者:不详 |