win10日历可视移动高亮范围

本篇文章在前一个初级的基础上进行后续的体验优化

目标效果

1. 鼠标在目标元素内进行移动，9个块组成的圆形高亮会随之移动

实现效果图

1.win10原图

2.进阶实现图

技术点

1. 初级篇使用的渐变范围写法：radial-gradient(42px at right bottom, #3c3c3c, #1a1a1a);

2. 进阶篇使用的渐变范围写法：radial-gradient(63px at 63px 63px, #3c3c3c, #1a1a1a);

   • 第一种写法是不考虑高光范围移动，通过九个中心点组合实现，简单
   • 第二种方法使用具体的原点定位渐变的中心，通过js计算动态修改，通过九个中心点组合实现

3. 解释一点：两种方法都是通过给九个元素设置不同的渐变原点，但思想不同

   • 第一种是九个点拼成一个圆，即中心圆有九个
   • 第二种是一个圆涵盖九个块，但中心圆只有一个，再计算九个点距离圆心的距离得到初始的渐变原点

图解：

方法一，九个红点就是九个块的渐变中心（右下，中下，坐下，右中，不设置渐变，左中，右上，中上，左上）

方法二，中心的绿点就是圆心，坐标(63,63),九个黄点就是每个块的零点，算出黄点相对绿点的坐标
[

(63,63),
(21,63),
(-21,63),
(63,21),
不设置渐变
(-21,63),
(63,-21),
(21,-21),
(-21,-21),

]
3.两种方法都有一个中心块不设置渐变色，纯背景色就可以

使用第二种方法，目的不是为了得到另一种实现方式，是因为在实现鼠标移动时，动态移动高光范围，方法一很难计算移动的趋向和值，因为涉及到九个圆的圆心位置；而使用方法二，只要关心一个圆就行，及中心的圆，再通过中间值计算出对应九个块的位置。

计算核心

根据我的实现过程，移动的计算规则是这样的：
计算倍数公式：中心原点/n+移动差值 = 样式表中固定的位置
n算出来的结果就是在js中写入的每个块的改变倍数即

1.5就是计算出来的n
原点---origin 移动差值---num
radial-gradient(${originX}px at ${originX/1.5+numX}px ${originY/1.5+numY}px, #3c3c3c, #1a1a1a)

是怎么算出来不同的n？

1. 不考虑动态js改变，先使用css写出固定的像素,以第一个块为例：
   小块边框是42px,九个块拼成一个大正方形，内切圆就是我们应该实现的高光，中心原点坐标(63,63),则第一个块的渐变中心就出来了

   background-image: radial-gradient(63px at 63px 63px, #3c3c3c, #1a1a1a);

2. 鼠标移动获取事件对象坐标a,获取当前鼠标所处的块的位置b,差值就是b-a-21,减21是因为我们是按照中间值计算的，因为圆在正中间，即变化范围的中间值，差值的变化范围是0-42,一个小正方形的边长，所以要减21
3. 只要计算出变化的规律，直接操作dom改变就好了，记住mousemove事件同样需要移除一遍类名

代码

相关代码点击这里查看吧

进阶源代码

其他

这个就是完整版的实现，讲得不好，没懂的可以看源码，再不懂就评论吧