win10日历交互效果(进阶)

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. 解释一点：两种方法都是经过给九个元素设置不一样的渐变原点，但思想不一样

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

图解：

1. 

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

1. 

方法二，中心的绿点就是圆心，坐标(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事件一样须要移除一遍类名

代码

相关代码点击这里查看吧

进阶源代码

其余

这个就是完整版的实现，讲得很差，没懂的能够看源码，再不懂就评论吧