摘要：日历可视移动高亮范围本篇文章在前一个初级的基础上进行后续的体验优化目标效果鼠标在目标元素内进行移动，个块组成的圆形高亮会随之移动实现效果图原图进阶实现图技术点初级篇使用的渐变范围写法进阶篇使用的渐变范围写法第一种写法是不考虑高光范围移动
win10日历可视移动高亮范围
本篇文章在前一个初级的基础上进行后续的体验优化目标效果
鼠标在目标元素内进行移动，9个块组成的圆形高亮会随之移动
实现效果图1.win10原图
2.进阶实现图
初级篇使用的渐变范围写法：radial-gradient(42px at right bottom, #3c3c3c, #1a1a1a);
进阶篇使用的渐变范围写法：radial-gradient(63px at 63px 63px, #3c3c3c, #1a1a1a);
第一种写法是不考虑高光范围移动，通过九个中心点组合实现，简单
第二种方法使用具体的原点定位渐变的中心，通过js计算动态修改，通过九个中心点组合实现
解释一点：两种方法都是通过给九个元素设置不同的渐变原点，但思想不同
第一种是九个点拼成一个圆，即中心圆有九个
第二种是一个圆涵盖九个块，但中心圆只有一个，再计算九个点距离圆心的距离得到初始的渐变原点
图解：
方法一，九个红点就是九个块的渐变中心（右下，中下，坐下，右中，不设置渐变，左中，右上，中上，左上）
方法二，中心的绿点就是圆心，坐标(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？
不考虑动态js改变，先使用css写出固定的像素,以第一个块为例：
小块边框是42px,九个块拼成一个大正方形，内切圆就是我们应该实现的高光，中心原点坐标(63,63),则第一个块的渐变中心就出来了
background-image: radial-gradient(63px at 63px 63px, #3c3c3c, #1a1a1a);
鼠标移动获取事件对象坐标a,获取当前鼠标所处的块的位置b,差值就是b-a-21,减21是因为我们是按照中间值计算的，因为圆在正中间，即变化范围的中间值，差值的变化范围是0-42,一个小正方形的边长，所以要减21
只要计算出变化的规律，直接操作dom改变就好了，记住mousemove事件同样需要移除一遍类名
代码相关代码点击这里查看吧
进阶源代码 其他这个就是完整版的实现，讲得不好，没懂的可以看源码，再不懂就评论吧
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/99510.html
win10日历 早就想试着实现以下win10日历的动态css效果，现在终于有时间试试啦。本篇文章只是实现简单的效果，进阶篇后续会放上来 目标效果 鼠标移入目标元素，周围相关八块元素点亮，点亮高光范围呈圆形 点击元素选中，呈蓝色色块 实现效果图 1.win10原图showImg(https://segmentfault.com/img/bVbkdE9?w=364&h=499);2.初级实现图sh...
win10日历 早就想试着实现以下win10日历的动态css效果，现在终于有时间试试啦。本篇文章只是实现简单的效果，进阶篇后续会放上来 目标效果 鼠标移入目标元素，周围相关八块元素点亮，点亮高光范围呈圆形 点击元素选中，呈蓝色色块 实现效果图 1.win10原图showImg(https://segmentfault.com/img/bVbkdE9?w=364&h=499);2.初级实现图sh...
摘要：任务获取当前时间并按以下格式输出。快捷键运行窗口输入回车输入回车，进入盘的根目录，可使用回车查看根目录下的文件输入其中为刚才保存的文件名，如回车，即可执行。 任务 ...
阅读 685·2019-08-30 15:54
阅读 3219·2019-08-29 15:33
阅读 2557·2019-08-29 13:48
阅读 961·2019-08-26 18:26
阅读 3241·2019-08-26 13:55
阅读 1296·2019-08-26 10:45
阅读 1046·2019-08-26 10:19
阅读 208·2019-08-26 10:16
