js下 Day12、案例

一．垃圾分类

效果图:

功能思路分析:

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) 点击菜单，切换菜单类名和对应省市区的类名进行显示隐藏