js下 Day11、案例

一．成绩分类

效果图:

功能思路分析:

1. 渲染数据

2. 鼠标按下开启拖拽

\1. 给成绩盒子绑定鼠标按下事件(mousedown)，用事件委托做多个标签的拖拽

\2. 开启控制拖拽的变量

\3. 获取鼠标到元素的距离（e.offsetX）

\4. 获取事件源

\5. 克隆一个副本，设置定位，放到成绩盒子中

3. 鼠标移动-副本跟随

\1. 当开关变量为真时移动盒子

\2. 克隆盒子位置 = 鼠标到页面的距离 - 鼠标到元素的距离

4. 鼠标松开-边界判断

\1. 判断克隆元素是否存在，不存在则直接return

\2. 使用**getBoundingClientRect()**方法,获取成才盒子和不成才盒子的上下左右边界值

\3. 判断两个成绩是否都大于90，是则进行成才盒子边界判断。当鼠标进入指定区域则:**将事件源添加到成才盒子,删除克隆副本;**当鼠标没有进入范围则:删除克隆副本

\4. 未成才盒子判断同理

#二．放大镜

效果图：

功能思路分析:

1. 鼠标滑入小盒子=> 显示遮罩和大盒子

2. 鼠标移动 => 遮罩移动 大图移动

3. 鼠标离开 => 隐藏遮罩 隐藏大盒子

#三．今日小结

\1. 拖拽固定三步: 鼠标按下mousedown 鼠标移动mousemove 鼠标抬起mouseup

\2. 获取元素尺寸定位信息: 元素.getBoundingClientRect()

\3. 克隆元素: cloneNode(true)

\4. 节点添加删除: appendChild() removeChild()

#四．作业 -- 垃圾分类

效果图:

垃圾分类作业要求：

\1. 将垃圾拖拽到垃圾桶内

\2. 进入到垃圾桶后判断是否分类正确：错误提示“分类错误，罚款50”，正确“优秀公民，棒棒嗒”。( 根据图片的title标签提示内容判断 )

注意：移动图片时有默认形为，需要取消掉（e.preventDefault()）