单元9设计页面类网页特效解决方案.ppt

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