《WEB前端开发实战》课件 2任务4：页面侧边栏特效

第三章

JavaScript网页特效制作任务四

页面侧边栏特效制作主讲：谭少谋htmlh5imgjavascriptwebcsscolorhr目录任务情境任务目标任务描述任务实施学习资源考核评价课后拓展htmlh5imgjavascriptwebcolorhr任务情境广西少数民族文化资源网是一个通过网站展示广西少数民族在文化、节日、美食、古迹等方面资源的的综合性资源类的网站。为了帮助用户在浏览网页时更好的找到感兴趣的内容，我们就需要加入侧边栏JavaScript特效。工作任务单工作任务单任务要求根据效果图完成服饰详情页侧边栏制作甲方提供的设计图

如右图所示评判标准1.能够掌握获取滚动条位置的方法；2．能够正确使用onclick事件；3．能够掌握获取页面元素的方法；4．能够正确使用循环判断实现侧边框隐藏功能；作品提交要求站点文件夹评判标准1.能够掌握获取滚动条位置的方法；2．能够正确使用onclick事件；3．能够掌握获取页面元素的方法；4．能够正确使用循环判断实现侧边框隐藏功能；任务目标任务目标能够掌握获取滚动条位置的方法；能够正确使用onclick事件；能够掌握获取页面元素的方法；能够正确使用循环判断实现侧边框隐藏功能；任务描述本任务是基于服饰详情页进行JavaScript的制作。任务要求是网页滑轮往上或者往下移动时，页面的侧边栏始终跟随滑轮移动，并且在点击侧边栏中的“返回顶部”按钮时页面会跳转到页面顶部位置，并切点击“三角”按钮可以实现侧边的显示或者隐藏。我们将通过完成广西少数民族文化资源网中的服饰详情页侧边栏效果，进一步学习如何利用JavaScript完成侧边栏特效。任务实施图2

效果图（有特效）图1

效果图（无特效）效果图展示编写JS特效重构html+css找出原页面侧边栏的HTML修改html找出原页面侧边栏的CSS修改CSS步骤一步骤二步骤三步骤四重构html+css操作步骤步骤六效果图展示编写JS特效任务实施重构html+css链接外部JavaScript文件获取页面元素设置侧边栏显示时的状态设置点击事件步骤一步骤二步骤三步骤四编写JS特效操作步骤利用if...else语句判断侧边栏状态步骤五获取滚动条位置步骤六设置返回顶部效果步骤七效果图展示重构html+css编写JS特效任务实施学习资源获取滚动条位置

1.什么是idocument.documentElement.scrollTop？

Element.scrollTop

属性可以获取或设置一个元素的内容垂直滚动的像素数。一个元素的

scrollTop

值是这个元素的内容顶部（卷起来的）到它的视口可见内容（的顶部）的距离的度量。当一个元素的内容没有产生垂直方向的滚动条，那么它的

scrollTop

值为0。

2.scrollTop注意事项如果一个元素不能被滚动（例如，它没有溢出，或者这个元素有一个"non-scrollable"属性），scrollTop将被设置为0。设置scrollTop的值小于0，scrollTop

被设为0如果设置了超出这个容器可滚动的值,scrollTop会被设为最大值。

考核评价班级：姓名：学号任务名称：侧边栏评价项目评价标准自评情况考核情况课前自主探究（10%）完成课前学习通中下发任务£完成£基本完成R未完成□完成□基本完成□未完成工作过程（50%）JS特效分析能够进行正确的分析特效所需的JS方法□完成□基本完成□未完成□完成□基本完成□未完成

获取页面元素能够进行正确获取页面元素□完成□基本完成□未完成□完成□基本完成□未完成

if语句编写能够正确使用IF嵌套循环□完成□基本完成□未完成□完成□基本完成□未完成

设置侧边框内容的状态能够正确设定侧边框显示/隐藏的状态□完成□基本完成□未完成□完成□基本完成□未完成

获取滚动条顶部位置能够正确应用documentElement.scrollTop方法□完成□基本完成□未完成□完成□基本完成□未完成项目成果（30%）工作完整能够按时完成任务□是□是

工作规范能按企业规范要求进行操作□是□是

成果展示能准确表达，汇报成果□是□是非技术考评（10%）态度学习态度是否端正□是□是

纪律遵守纪律□是□是

协作有交流、团队合作□是□是

文明保持安静，清理场所□是□是总分：

课后拓展练一练：设计并制作校园