课程地址：https://www.imooc.com/learn/32

效果分析

1. 一张小图，一张大图
2. 图片大小等比进行计算

结构分析

1. 页面结构
2. 技术点
   1. 事件捕获
   2. 定位
   3. 相关位置计算
   4. 。。。

要用到的知识点

事件相关

1. onmouseover :会在鼠标指针移动到指定的对象.上时发生。
2. onmouseout :会在鼠标指针移出指定的对象时发生。
3. onmousemove :会在鼠标指针移动时发生。

距离相关, 演示地址: https://github.xiaodongxier.com/demo/知识点/定位属性

1. offsetLeft：元素在左外边框至包含元素的左内边框之间的像素距离。
2. offesetTop：元素在上外边框至包含元素的上内边框之间的像素距离。
3. offsetWidth：元素在水平方向上占用的空间大小，以像素计。包括元素的高度、(可见的)垂直滚动条的宽度、左边框宽度和有边框宽度。
4. offsetHeight：元素在垂直方向上占用的空间大小，以像素计。包括元素的高度、(可见的)水平滚动条的高度、左边框高度和右边框高度。
5. even.clientX
6. even.clientY