一．垃圾分类
效果图:
功能思路分析:
1. 鼠标按下
(1) 获取鼠标到元素的距离(e.offsetX)
(2) 开启开关变量
(3) 获取事件源
(4) 记录垃圾初始位置
2. 鼠标移动
(1) 当开关变量为真时，修改垃圾的位置即的left和top
(2) 垃圾位置 = 鼠标位置到页面位置 - 鼠标到盒子的位置
3. 鼠标抬起
(1) 关闭开关变量
(2) 循环每一个垃圾桶，通过 getBoundingClientRect()方法获取垃圾桶的四个边界,判断鼠标是否进入垃圾桶
(3) 如果进入垃圾桶，再利用indexOf()检测垃圾和垃圾桶的title值
(4) 为真则删除垃圾，为假则回到原地( 鼠标按下时记录的初始位置 )
#二．仿苹果菜单
效果图:
功能思路分析:
1. 封装获取两点之间距离方法
(1) 利用勾股定理求斜边： 直角边的平方和 = 斜边的平方
(2) 求平方用Math.pow( a,2) ， 开根号用Math.sqrt(c)
2. 封装获取元素中心点方法
(1) 通过getBoundingClientRect()方法拿到元素的位置尺寸信息
(2) 中心点:即 元素的left + 元素的width/2
3. 图标放大
(1) 循环每一个图标，调用imgCenter()方法拿到每一个图标的中心点
(2) 调用getPos（）方法获取鼠标到图片中心点的距离
(3) 设置一个临界点，当两点之间的距离小于临界点时，图片开始放大
(4) 图标放大即修改图标的宽度，在初始宽度的基础上放大
#三．今日小结
1.获取元素的尺寸和位置信息:元素. getBoundingClientRect()
2.勾股定理: 直角边的平方 = 斜边的平方
3.开方Math.pow（值，次方）
4.开根号Math.sqrt(值)
#四．作业--选项卡三级联动
效果图:
功能要求:
1. 渲染省份
(1) 对象的数据用for in，渲染时在标签中设置自定义属性保存编码
2. 渲染城市
(1) 点击省份渲染城市，拿到标签上的编码，通过**【】方式取数据**
(2) 对象的数据用for in，渲染时在标签中设置自定义属性保存编码
3. 渲染区县
(1) 点击城市渲染城市，拿到标签上的编码，通过**【】方式取数据**
4. 选项卡切换
(1) 点击菜单，切换菜单类名和对应省市区的类名进行显示隐藏