?iPad Pro 的鼠标指针，用了又用
你的这台电脑，不再是电脑。[1]
PC（含 Mac）GUI 的世界中，几十年没有改变的设计有两个：一个是窗口，另一个是鼠标指针。传统的鼠标指针设计固然高效，但它经常引起我们的无端思考：为什么是一个箭头？为什么链接的指针是一个手？为什么箭头往左歪？
新 iPad Pro 的触摸板体验（参见这篇文章）让我们眼前一亮，其中就包含了对鼠标指针的重新思考。也许这不是比传统鼠标指针更好的设计，但至少是推翻它的一次大胆尝试。
IMouse 是一个 Web 前端小插件，只需动动手指，就能在你的页面上引入这样的鼠标效果。
iframe 外侧（跨域 iframe 由于浏览器限制无法支持；非跨域 iframe 需要通信，暂不实现）；
import IMouse from 'imouse';IMouse.init(options);
首先下载 imouse.js 并下发。
<script src="imouse.js"></script><script>window.addEventListener('DOMContentLoaded', () => IMouse.default.init(options));</script>
IMouse.init(options: IMouseProps): IMouse初始化 IMouse 并指定参数。
| 属性 | 类型 | 默认值 | 描述 |
|---|---|---|---|
| defaultBackgroundColor | string | 'rgba(30, 111, 255, .1)' |
非 hover 默认状态下的光标背景颜色，CSS 格式 |
| activeBackgroundColor | string | 'rgba(30, 111, 255, .2)' |
非 hover 按下状态下的光标背景颜色，CSS 格式 |
| defaultSize | number | 20 |
非 hover 默认状态下的光标直径 |
| activeSize | number | 15 |
非 hover 按下状态下的光标直径 |
| hoverPadding | number | 8 |
hover 状态下的光标 padding 大小 |
| activePadding | number | 4 |
hover 按下状态下的光标 padding 大小 |
| hoverRadius | number | 8 |
hover 状态下的光标圆角半径 |
| activeRadius | number | 4 |
hover 按下状态下的光标圆角半径 |
| selectionWidth | number | 3 |
文字选择状态下的光标宽度 |
| selectionHeight | number | 40 |
文字选择状态下的光标高度 |
| selectionRadius | number | 2 |
文字选择状态下的光标圆角半径 |
| hoverSelector | string | 'a, button,input[type="button"],input[type="checkbox"],input[type="radio"],input[type="file"],input[type="submit"]' |
允许 hover 的元素，CSS 选择器格式 |
| normalTransitionDuration | number | 200 |
非 hover 状态下的动效时长，单位 ms |
| hoverTransitionDuration | number | 50 |
hover 状态下的动效时长，单位 ms；值越大，甩动光标时发生的抖动越强烈 |
| blurRadius | number | 10 |
非 hover 状态下的光标毛玻璃半径 |
| glowRadius | number | 200 |
hover 状态下的光标发光点半径 |
| style | React.CSSProperties | {} |
光标的附加样式 |
| zIndex | number | 10000 |
Z 轴层级 |
IMouse#destroy()销毁 IMouse 实例并恢复原始鼠标指针。