win10系统自带的日历hover效果
先看两个效果的对比
细节处理的不够好,不过没关系,主要是实现划过一个盒子来实现四周盒子的边框逐渐消失的效果
具体代码请点击http://www.skybseo.cn/web/windowsrili.html
实现思路
1.写出静态样式(我的用的是table)
2.创建样式class,
2.1 创建最中心的hover类,实现划过显示边框。
2.2 逐个创建四周的class,共8个,例如右侧的样式为划过显示线性渐变的边框,右下的样式为划过显示径向渐变的边框,注意径向渐变的形状为圆形,半径为边框的边长。
3.使用原生js,实现划过显示相应的类,离开遍历数组将class重置。
需要注意的点
1.线性渐变和径向渐变,上下左右的区块使用线性渐变,四个角的区块使用径向渐变,径向渐变的形状为圆形,半径为边框边长,不太了解的可以先去看看css3渐变。
2.使用js显示四周的区块,当鼠标停留的区块在边上或者角落,那么至少有一侧或两侧的区块不应该被显示,可以使用if判断一下,是边角就屏蔽掉不应该显示的区块。
3.用js选中下面的区块,使用的是 td[i+6],td[i+7],td[i+8],但如果选中的是最后一行,那么这三项是超出td的范围的,会提示undefined,我们是用 td[i+6] || dom ,dom为设置的一个隐藏的节点,意思是,td[i+6] 如果不存在则使用dom节点,如果存在使用td[i+6],类似三目表达式。
具体代码请点击http://www.skybseo.cn/web/windowsrili.html,右击查看源代码。