细腻的导航效果的制作方法
2010-11-08 09:36:56
网页教程
内容摘要:
速读文章内容
一般的导航效果大家都很熟悉了,例如用CSS给导航文本设置上、下划线、背景颜色或位移等。前面的帖子中有网友提到http://www.网址未加载/这个网站
一般的导航效果大家都很熟悉了,例如用CSS给导航文本设置上、下划线、背景颜色或位移等。前面的帖子中有网友提到http://www.网址未加载/这个网站,偶发现其首页中的导航效果不错,虽然flash做的没有很眩的效果,但是比较细腻,看上去很舒服。
闲来无事,尝试在dw中实现同样的导航效果。效果如下所示:http://vip.网址未加载/flood/daohang/1.htm。
首先分析效果的组成,鼠标经过时背景发生变化,小图象转动。Ok!考虑使用dw中的swap image(翻转图)+背景图象变化(CSS定义)应该可以实现效果。
准备4张gif图象分别为:
鼠标经过时的背景图象(在fw中使用animate可以很简单的实现渐变效果,本图象透明度由0%渐变到**)
鼠标划出时的背景图象(本图象透明度由**渐变到0%)
动态小图象
静止小图象(在fw中设置图象格式为gif后保存即可)
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)"
修改翻转图的name为不同的值即可。
3.这个例子的技术含量并不是很高;而且偶不是很熟悉flash,不知道制作起来用dw或flash哪种更简单一些,这里提出来只是给大家提供一种解决问题的方法。
4.两个简单效果的叠加就可以制作出比较酷的效果,希望对大家能有所启示
补充一点:制作动画背景图象时,为实现效果,需要设置gif动画的循环为no looping(不循环)
首页
点赞
分享
相关内容
不用图像组件的ASP图像计数器
树目录菜单的制作
你应该关注web标准的真正原因
web标准的商业价值
学习CSS的10大理由
通向web标准之路
CSS比表格更难吗?
采访Eric Meyer的10个问题
最新发布
小熊圣诞袜怎么画
艺考
儿童简笔画教程大全
2022/12/3
有关关爱名言警句_名言警句
艺考
名人名言
2022/12/7
蛇颈龙宝宝线稿图片
艺考
少儿美术
2022/12/13
做人要诚信的警句_诚信名言
艺考
名人名言
2022/12/6
我和团团有个约定手抄报一等奖(7张)
艺考
手抄报模板大全
2023/1/6
暑假手抄报英文版手抄报获奖作品5张
艺考
手抄报模板大全
2023/1/1
专题合集
院校库
专业库
招生章程
招生计划
录取分数
录取原则
收费标准
录取查询
通知书
入学指南
新生数据
就业情况
高考人数
高考报名
高考考试
高考试卷
高考作文
高考查分
各批次线
一分一段
志愿填报
录取安排
投档分数
模拟联考
统考考题
统考查分
统考分数
艺考简章
更多省份
艺考培训
-
设计
-
网页素材
-
网页教程
-
细腻的导航效果的制作方法