Dreamweaver网页设计项目教程 王雪松 项目二 任务4网页美化与特效5新.pptVIP

Dreamweaver网页设计项目教程 机械工业出版社 任务4网页美化与特效5（建议2学时） 任务实施 任务实施 鼠标动作特效 导航条上的JS特效如图所示。当鼠标滑上主导航文字时会弹出相应的下一级导航条，也就是说，前面我们定义的子导航栏“#nav_son”在浏览网页时不会自动显示，而是通过一个鼠标“动作”来使它发生“显示”事件。这需要通过JavaScript来实现网页特效。 任务实施 鼠标动作特效 在制作下拉导航前必须了解两个概念：事件和行为。在此使用两个事件： onMouseOver —— 鼠标移上。 onMouseOut—— 鼠标移开。 事件要附加到载体上，网页中事件的载体一般为网页元素。当对网页元素进行了某操作时，就执行了对应的事件并可以触发行为，这时将运行相应的JS程序。在本实例中，当发生鼠标“移上或移开”主导航链接文字事件时，会触发“显示或隐藏”相应的子导航栏行为。 任务实施 鼠标动作特效 1）选择“应用程序栏”→“窗口”→“行为”，调出“行为”面板，如图所示。 2）选择“首页”超链接，单击“行为”面板中的 “增加行为”按钮，在下拉选项中选择“显示-隐藏元素”，如图所示： 任务实施 鼠标动作特效 3）在弹出的“显示-隐藏元素”对话框中，选择“div nav_son”，单击“显示”按钮，此时在“元素”选项列表中，“div nav_son”后面多了“（显示）”，再单击“确定”按钮，如图所示： 任务实施 鼠标动作特效 4）在“行为”面板中，将默认事件改为“onMouseOver”事件，如图所示： Thank you! 谢谢观赏