【js】仿照win10系统日历效果 移动鼠标产生光晕效果（完全呈现）

效果展示

无论是鼠标降临的光晕效果，还是更换日期都完整的呈现了出来

展示页面

GitHub地址

---

做了个更新

新增了点击显示当前日期的功能，更像win10的系统日历了。。。

使用

光晕

1.在父盒子上添加class=“light_hover”
2.导入light_hover.js文件
3.调用方法lightHover()
lightHover()方法有一个参数，以该参数为盒子对光标反应半径，即：

该参数默认为80，即使用lightHover()方式调用将会使得盒子对光标反应半径为80

时间和日历

1.导入lunar_calendar.js(历算组即将过期，详见)，lunar_calendar_new.js和setTime.js文件
2.调用以下方法，设置时间的每秒钟变换

        getDate();
        setInterval(getDate, 1000);//定时器

3.日历设置

setCalendar();

setCalendar();有一个参数，为日历展示的日期信息，如setCalendar(“2020-12-07”);将展示2020年7月的日期信息

原理

盒子布局

<td class="light_hover">
	<span>2</span>
	<span>廿五</span>
</td>

使用一个父盒子嵌套一个子盒子，以父盒子的背景色作为子盒子的边框色

光环效果

使用CSS函数radial-gradient创建的渐变图像作为父盒子的背景图片background-image

通过控制radial-gradient函数的size参数和position参数控制创建渐变图像的渐变线条位置

之后使用javascript监控mouse mover事件动态计算渐变形状与容器的距离，以及光标距离容器的位置