《单元9设计页面类网页特效剖析》由会员分享，可在线阅读，更多相关《单元9设计页面类网页特效剖析（25页珍藏版）》请在金锄头文库上搜索。
1、单元单元9 9 设计页面类网页特效设计页面类网页特效 任务9-1 实现页面换肤网页特效 任务9-2 根据日期特征动态切换背景 浏览网页0902.html的外观效果如图9-2所 示，该网页会根据日期特征动态切换背景。 图9-2 浏览网页0902.html的外观效果 【知识必备】 9.19.1 正确使用 正确使用cookiecookie 9.29.2 正确区分 正确区分jQueryjQuery对象和对象和DOMDOM对象对象 【引导训练】 任务9-3 根据屏幕宽度自动设置 网页背景和导航栏 【任务描述】 网页0903.html中导航栏的部分内容 和网页背景如图9-3所示。 编写代码实现根据屏幕宽度
2、自动设 置网页背景和导航栏的功能。 图9-3 网页0903.html中导航栏的部分 内容和网页背景 任务任务9-4 9-4 页面快捷导航菜单的显示与隐藏页面快捷导航菜单的显示与隐藏 【任务描述】 在网页0902.html中，编写代码实现以下 功能。 （1）当滚动条向下滑动到一定的距离时，自动 显示如图9-4所示的快捷导航菜单。反之，当 滚动条向上滑动到小于一定的距离时自动隐藏 该快捷导航菜单。 （2）单击“回到顶部”超链接时返回页面顶部 。 （3）在该快捷导航菜单中单击超链接“分类 导航”可折叠其下方的相关内容，如图 9-5所示。 图9-4 网页0902.html中的快捷导航菜单 图9-5 网
3、页0902.html中折叠分类导航内容 任务任务9-5 9-5 下拉窗口的打开与自动隐藏下拉窗口的打开与自动隐藏 【任务描述】 浏览网页0905.html时，其初始状态 如图9-6所示，单击“切换”超链接时打开 下拉窗口，如图9-7所示，鼠标指针离开 即可自动隐藏该下拉窗口。 图9-6 浏览网页0905.html的初始状态 图9-7 在网页0905.html中单击“切换” 超链接时打开下拉窗口 任务任务9-6 9-6 滚动屏幕时隐藏或显示返滚动屏幕时隐藏或显示返 回顶部导航栏回顶部导航栏 【任务描述】 浏览网页0906.html时，当向下滚动滚动 条到一定距离时，自动显示“返回顶部”导航 栏，
4、如图9-8所示。 单击该导航栏则自动返回顶部。 当向上滚动滚动条小于一定距离时，自 动隐藏该导航栏。 图9-8 网页0906.html中的“返回顶部”导航栏 【同步训练】 任务9-7 选购商品时打开购物车页面 【任务描述】 在购物网站中选购商品后，单击超链接 “加入购物车”即可打开购物车页面，并将所 选商品的信息添加到购物车页面。 任务任务9-8 9-8 动态切换页面背景与调整页面大小动态切换页面背景与调整页面大小 【任务描述】 浏览网页0908.html时，其初始状态 如图9-9所示。 初始状态的图片是随机选择的，当 鼠标指针指向数字按钮时，动态切换页 面背景，如图9-10所示。 图9-9
5、浏览网页0908.html时的初始状态 图9-10 动态切换网页0908.html的页面背景 任务任务9-9 9-9 浮动框架的高度自适应页浮动框架的高度自适应页 面内容的高度面内容的高度 【任务描述】 网页0909.html对应HTML代码如下所 示，即在该网页的“fullCell”区域中以浮动 框架的方式显示子网页0909sub.html中的内 容。 要求浮动框架的高度自适应页面内 容的高度。 任务任务9-10 9-10 随着屏幕高度变化隐藏随着屏幕高度变化隐藏 或显示返回顶部导航栏或显示返回顶部导航栏 【任务描述】 浏览网页0910.html时，当向下滚动滚动 条到一定距离时，自动显示“返回顶部”导航 栏，如图9-11所示。 单击该导航栏则自动返回顶部。 当向上滚动滚动条小于一定距离时，自 动隐藏该导航栏。 图9-11 网页0910.html中的“返回顶部”导航栏 任务任务9-11 9-11 促销信息的显示与隐藏促销信息的显示与隐藏 【任务描述】 网页0911.html中的促销预报月历如图 9-12所示，当鼠标指针指向特别标记处时 自动显示促销信息，如图9-13所示，鼠标 指针移开时隐藏促销信息。 图9-12 网页0911.html中的促销预报月历 图9-13 网页0911.html中显示促销信息
