win10日历交互效果
2024-09-03 01:29:30
win10日历
早就想试着实现以下win10日历的动态css效果,现在终于有时间试试啦。
本篇文章只是实现简单的效果,进阶篇后续会放上来
目标效果
- 鼠标移入目标元素,周围相关八块元素点亮,点亮高光范围呈圆形
- 点击元素选中,呈蓝色色块
实现效果图
1.win10原图
2.初级实现图
3.进阶实现图
技术点
定义公共类:
- disable---置灰
- hover(n)---高亮的九个块
- active---点击激活
实现九个块呈圆形的高亮区域
- css:使用background属性,值是径向渐变
- css:径向渐变参数顺序:半径、渐变方向、渐变色
- js:点击绑定active类名,移动绑定hover类名(9个)
- js:时间内绑定类名,先移除清空再绑定
- js:碰壁处理,鼠标碰到上下左右时,相对反方向移除类名
代码
相关代码点击这里查看吧
初级实现github查看代码
其他
这个只是初步的实现,接下来的进阶篇会显现鼠标移动时,高亮范围也相继移动
这篇文章的圆形高亮范围实现效果,是通过九个小块拼接出来的圆形,下篇文章我会介绍另外一种思路实现。
最新文章
- paip.快捷方式分组管理最佳实践ObjectDock
- 5-1 源码包与RPM包的区别
- Windows上安装Yeoman
- ADO.NET入门教程(三) 连接字符串,你小觑了吗?
- Microsoft Dynamics CRM 2011 面向Internet部署 (IFD) ADFS虚拟机环境搭建的步骤(CRM与ADFS装在同一台服务器上) 摘自网络
- 基于html5 localStorage , web SQL, websocket的简单聊天程序
- spring jdbc踩坑日记,new JdbcTemplate 为null导致UserDao一直为null
- elasticsearch补全功能之只补全筛选后的部分数据context suggester
- hdu 3613";Best Reward";(Manacher算法)
- Android实现图片裁剪
- 调试web api的工具 谷歌插件 Restlet
- photobeamer
- 解决导入protobuf源代码Unity报错的问题
- 爬虫框架Scrapy之CrawlSpiders
- Centos6、7 PHP5.4 5.5 5.6安装
- 【转帖】关于sql server 2008 的mdf收缩问题
- Play on Words UVA - 10129 (欧拉回路)
- node 渲染html模板配置
- Struts2 - 与 Servlet 耦合的访问方式访问web资源
- IP地址资源的分配和管理