前端基础阶段作业：JavaScript实现动态效果与交互.pdfVIP

前端开发基本功阶段作业

根据需求使用JavaScript代码实现该需求：

需求:利用所学的javascript基础知识，实现案例中的效果。

1、腾讯管家首页示例中动态效果

2、在使用JavaScript实现动态效果时，先注释步骤，然后再实现功能

4、代码缩进良好、清晰、一致，保持代码整齐

(注意：只限使用javascript完成示例中动态效果)

效果一：

效果二：

效果三：

功能实现分解:

⚫头部导航效果和banner图效果：

1步骤注释说明

2滑动块缓动滑动(滑动块根据鼠标滑过的导航元素，显示在对应的导航元素上边沿)

3子分类的显示隐藏(鼠标滑过有隐藏子分类的主导航元素容器内时，子分类显示，离开

子分类隐藏)

4banner图切换效果(定时器使banner图自动切换，同时小圆点切换的对应的位置。鼠标

滑过展示区域时，清除定时器，离开后，开启定时器)

注意：

当鼠标移动到上图中的小图标上时，等于离开展示容器，无需特殊处理。