IMouse

~~你的这台电脑，不再是电脑。~~[1]

介绍

PC（含 Mac）GUI 的世界中，几十年没有改变的设计有两个：一个是窗口，另一个是鼠标指针。传统的鼠标指针设计固然高效，但它经常引起我们的无端思考：为什么是一个箭头？为什么链接的指针是一个手？为什么箭头往左歪？

新 iPad Pro 的触摸板体验（参见这篇文章）让我们眼前一亮，其中就包含了对鼠标指针的重新思考。也许这不是比传统鼠标指针更好的设计，但至少是推翻它的一次大胆尝试。

IMouse 是一个 Web 前端小插件，只需动动手指，就能在你的页面上引入这样的鼠标效果。

在线体验

https://rikumi.github.io/

已实现功能

• 普通圆形鼠标指针（带毛玻璃效果）；
• 选择文字时变为垂直光标（不支持悬浮在文字上方时变为垂直光标）；
• 悬浮在链接上方时框住链接，支持自定义代表链接的 selector；
• 按下时缩小变色效果；
• 指针颜色、大小、动画时长等基本参数定制。

已知问题

• 不支持自动切换深色/浅色光标；
• 会卡在 iframe 外侧（跨域 iframe 由于浏览器限制无法支持；非跨域 iframe 需要通信，暂不实现）；
• 在较大的链接元素上 hover 体验可能不佳；
• 在 macOS 端，弹出横幅通知会导致鼠标指针恢复正常箭头显示，这是 macOS 的 Bug。

引入方式

• NPM 引入：

import IMouse from 'imouse';

IMouse.init(options);

• Script 引入：

首先下载 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 实例并恢复原始鼠标指针。