九宫格特效

小咪咪 2022-02-24 06:16 315阅读 0赞

前言

此次九宫格牵扯到了 节点之间的 距离 与 位置交换

其中有几点重要的思想列举如下：

1.  对于随机颜色的添加  
    （1）可以利用\#ffffff 十六进制进行添加。  
    （2）也可以利用rgba（255，255,255）进行添加。  
    那么，第二种方法的好处显而易见，因为随机数函数，只能取到数字，而若需要出现字母（十六进制方法），则只能利用字符串存储需要的字母，而 随机数函数去随机取到索引，进而取到索引下的字母。
2.  距离的判断  
    一般通过判断两个块的中心位置，即一个通用的方法就是利用 勾股定理 计算量中心点距离。  
    通过 client 和 offSet 两个属性，就可以解决获取以上问题，但是要注意client是相对于 已定位的父级元素 所取的值。
3.  两个块的互换，这里分了三个动作，其中主要点在点下鼠标，和鼠标抬起时事件

（1）点下鼠标（onmousedown）  
这里有两个思路：  
①通过在点击时，获取到元素块的初始位置，并保存。（这里用到了函数封装，返回一个对象，通过对象属性名调用值，以简化代 码）  
②通过 克隆 方法，在点击时克隆出点击块形状和位置，即也达到了（1）中保存初始位置的作用，且 克隆块 在后期处理有更多的 作用。

（2）鼠标移动（onmousemove）  
通过client 和 offset即可实现，节点元素跟随鼠标，此动作较为简单。

（3）鼠标抬起（onmouseup）  
当鼠标抬起时，需要得到最近块 并且实现 位置互换

这里仍然有两种思路

通过 勾股定理 得出的 点击块 与所有 未被选中块 中心的距离，因此需要 循环（很多地方都需要用到）

①在循环中，如果找到满足条件（距离小于某值），直接终止循环，  
并可直接通过 终止时的 索引值 得到未被选中块 位置。  
从而进行位置互换。

②先循环全部，得到所有距离值，并将其通过数组保存起来（push（），此方法可以输出数组以检验代码），  
通过sort排序之后，取最小值（数组左端）。  
这里，有一点需要注意，对数组用 sort 方法，会改变并返回原数组 。  
所以需要 另一个数组取存储，并且由于数组是地址引用，  
直接赋值 仍行不通，  
需要将 存储数组 也放进循环。

以下是效果图 ：  
![效果图][20190403114039889.gif]

[20190403114039889.gif]: /images/20220224/27cf2188b1ed48a5bf12a80d86807f2a.png