2.5制作菜单类特效（课件）-《网页制作高级特效》同步教学（劳动版）

模块二　JavaScript 高级特效 3 1 课题 １ JavaScript 语言基础 2 课题 ２ JavaScript 对象化编程 课题 ３　制作表单验证类特效 目录 4 5 6 7 8 课题 ４　制作层切换和层提示特效 课题 ５　制作菜单类特效 课题 ６　制作广告类特效 课题 ７　制作滚动类和日期类特效 课题 ８　制作网页辅助类特效 课题 ５　制作菜单类特效 学习目标 １. 能制作纯 HTML ＋ CSS 的菜单特效。 ２. 能制作 JavaScript ＋ CSS 的菜单特效。 相关知识 一、导航菜单 导航菜单是网页设计中不可缺少的部分，是人们浏览网站时从一个页面转到另一个页面的快速通道。 导航菜单的种类繁多，最基本的有三种形式: 横向导航菜单、纵向导航菜单和下拉式菜单。 制作导航菜单的技术有很多，可以采用纯 HTML ＋ CSS 、JavaScript ＋ CSS 或 jQuery 等技术制作菜单特效。 课题 ５　制作菜单类特效 二、HTML ＋ CSS 二级菜单制作原理 不使用 JavaScript，只使用 HTML ＋ CSS 也能制作出精美的二级菜单特效，其原理是使用:hover 伪类控制子选项的显示与隐藏。 １. 增加专门用于控制导航菜单的 Div ２. 一级菜单设置 ３. 二级菜单设置 (１) 二级菜单定位与隐藏 (２) 二级菜单显示 (３) 二级菜单变换链接效果设置 课题 ５　制作菜单类特效 三、JavaScript ＋ CSS 二级菜单制作原理 (１) 每个一级菜单都对应一个层，而这个层里存放着该一级菜单对应的二级菜单。二级菜单排列形状不同，就构成了不同形式的菜单。如果排列成横向，制作出来的就是横向导航菜单；如果排列成纵向，制作出来的就是纵向导航菜单。 (２) 默认情况下，二级菜单这个层是隐藏的。通过 <body > 标签 onload 事件调用初始化函数，在 CSS 中将需要被隐藏层的 display 属性值设为 “none”，可以达到此目的。 (３) 当鼠标移入一级菜单时，对应的二级菜单层显示。在 JavaScript 中通过鼠标移入事件 onmouseover 调用自定义的显示层函数，将层的 display 属性值设为 “block”。 课题 ５　制作菜单类特效 (４) 当鼠标从一级菜单中移开时，对应的二级菜单层隐藏。在 Javascript 中通过鼠标移出事件 onmouseout 调用自定义的隐藏层函数，将层的 display 属性值设为 “none”。 (５) 鼠标从一级菜单移到二级菜单上时，二级菜单也不能隐藏，因此，对二级菜单必须将其设为: 当鼠标移入时显示当前层，当鼠标移出时隐藏当前层。 课题 ５　制作菜单类特效 课题 ６　制作广告类特效 学习目标 １. 能制作路径不固定、可关闭的漂浮广告特效。 ２. 能制作可关闭的对联广告特效。 ３. 能制作带数字导航的横幅广告特效。 ４. 能制作可折叠的商品分类广告特效。 相关知识 一、路径不固定的漂浮广告 漂浮广告 (Floating Advertising) 是指漂浮在网站首页或各版块、帖子等页面的漂移形式的广告。 课题 ６　制作广告类特效 漂浮路径示意图 １. 运动轨迹的控制 ２. 暂停与继续移动的控制 ３. 关闭的控制 课题 ６　制作广告类特效 二、对联广告 对联广告是指利用网站页面左右两侧的竖式广告位而设计的广告形式。 课题 ６　制作广告类特效 可关闭对联广告 １. 在网站上挂对联 ２. 对联广告随页面浏览跟随移动 实现对联广告随页面浏览跟随移动特效，必须获取当前页面的滚动条纵坐标，并根据用户操作动态调整滚动条纵坐标。 课题 ６　制作广告类特效 三、带数字导航的横幅广告 横幅广告 (Banner Ad) 是横跨于网页上的矩形公告牌，表现商家广告内容的图片放置在页面上，当单击这些横幅的时候，通常可以链接到广告主的网页。 课题 ６　制作广告类特效 带数字导航的横幅广告 １. 轮播广告 ２. 切换广告 四、可折叠的商品分类广告 在商品分类下，单击某类商品可展开该分支，再次单击该类商品可折叠该分支。 课题 ６　制作广告类特效 可折叠的商品分类广告 １. eval ( )函数 ２. 可折叠商品广告核心代码分析 课题 ６　制作广告类特效 $$