JavaScript+jQuery网页特效设计实例教程 教学课件 作者 陈承欢 单元9 设计页面类网页特效.ppt

《JavaScript+jQuery网页特效设计实例教程 教学课件 作者 陈承欢 单元9 设计页面类网页特效.ppt》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

1、单元9设计页面类网页特效任务9-1实现页面换肤网页特效任务9-2根据日期特征动态切换背景浏览网页0902.html的外观效果如图9-2所示，该网页会根据日期特征动态切换背景。图9-2浏览网页0902.html的外观效果【知识必备】9.1正确使用cookie9.2正确区分jQuery对象和DOM对象【引导训练】任务9-3根据屏幕宽度自动设置网页背景和导航栏【任务描述】网页0903.html中导航栏的部分内容和网页背景如图9-3所示。编写代码实现根据屏幕宽度自动设置网页背景和导航栏的功能。图9-3网页0903.html中导航栏的

2、部分内容和网页背景任务9-4页面快捷导航菜单的显示与隐藏【任务描述】在网页0902.html中，编写代码实现以下功能。（1）当滚动条向下滑动到一定的距离时，自动显示如图9-4所示的快捷导航菜单。反之，当滚动条向上滑动到小于一定的距离时自动隐藏该快捷导航菜单。（2）单击“回到顶部”超链接时返回页面顶部。（3）在该快捷导航菜单中单击超链接“分类导航”可折叠其下方的相关内容，如图9-5所示。图9-4网页0902.html中的快捷导航菜单图9-5网页0902.html中折叠分类导航内容任务9-5下拉窗口的打开与自动隐藏【任务描述】浏

3、览网页0905.html时，其初始状态如图9-6所示，单击“切换”超链接时打开下拉窗口，如图9-7所示，鼠标指针离开即可自动隐藏该下拉窗口。图9-6浏览网页0905.html的初始状态图9-7在网页0905.html中单击“切换”超链接时打开下拉窗口任务9-6滚动屏幕时隐藏或显示返回顶部导航栏【任务描述】浏览网页0906.html时，当向下滚动滚动条到一定距离时，自动显示“返回顶部”导航栏，如图9-8所示。单击该导航栏则自动返回顶部。当向上滚动滚动条小于一定距离时，自动隐藏该导航栏。图9-8网页0906.html中的“返回顶

4、部”导航栏【同步训练】任务9-7选购商品时打开购物车页面【任务描述】在购物网站中选购商品后，单击超链接“加入购物车”即可打开购物车页面，并将所选商品的信息添加到购物车页面。任务9-8动态切换页面背景与调整页面大小【任务描述】浏览网页0908.html时，其初始状态如图9-9所示。初始状态的图片是随机选择的，当鼠标指针指向数字按钮时，动态切换页面背景，如图9-10所示。图9-9浏览网页0908.html时的初始状态图9-10动态切换网页0908.html的页面背景任务9-9浮动框架的高度自适应页面内容的高度【任务描述】网页09

5、09.html对应HTML代码如下所示，即在该网页的“fullCell”区域中以浮动框架的方式显示子网页0909sub.html中的内容。