浏览器事件

鼠标点击足球移动

点击球场中任意一点，让球在球场中移动。

要求：

• 足球的中心应该恰好在 点击时鼠标指针位置的下方；
• 保证足球不能越过球场边界；
• 页面滚动时，布局不被破坏；添加 CSS 动画；
• 代码最好适用于任何大小的球场；

点击查看

• 首先选择定位足球的方法，不能使用 position: fixed ，因为滚动页面会造成足球被移出球场。所以应该使用 position: absolute 使得定位真实可靠 ，同时应该使 field 自身的定位使用 position: absolute ；

• 接下来需要指定正确的 left / top 偏移，应该为相对于球场的坐标。

  以 left 为例：使用 event.clientX 获取点击位置的窗口相对坐标；要获取点击位置在球场中的相对坐标，减去球场相对于窗口的 left 以及 边框的宽度。同时要使足球在点击位置的中心，需要减去足球的一半宽度，使用 clientWidth 获取；

  所以最终足球的 left 为 event.clientX -fieldCoords.left - field.clientLeft - ball.offsetWidt / 2 ；

  

• 考虑边界，如果计算出的 top / left 小于 0 ，则置为 0 ；超出边界则设置为 球场的边界。

• 最后设置 ball.style.left 要添加字符串单位 px 。

折叠菜单

创建一个在点击时，会展示更多内容的菜单。

点击查看

轮播图实现

点击查看

• 轮播图的展示可以使用 列表和图片 实现图像带。通常这样的图像带很宽，所以使用一个固定大小的 <div> 剪切出要当前轮博展示的部分。
• 为了使列表水平展示，需要对 li 使用 display: inline-block 。并且要消除图片之间的保留空间，对 img 使用 display: block 覆盖原生的 inline 属性。
• 通过移动 ul 来实现轮播图的滚动。可以通过 transform: translateX() 或者修改 margin-left 。

事件委托

实现关闭消息

使用一个事件监听器实现。

树形菜单

创建一个点击可以 显示 / 隐藏 子节点的树形菜单：

• 只能有一个事件处理程序；
• 对节点标题以外（在空白处）的点击不会做任何处理；

• JavaScript 将每个树节点的标题都包装到 <span> 中。然后可以在 :hover 使用 CSS 样式，并精准处理文本上的点击事件，因为 <span> 的宽度恰好是文本的宽度；
• 为 tree 的跟节点设置一个处理程序，处理 <span> 标题上的点击事件；