imouse v1.3.4

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 并指定参数。

IMouse#destroy()

销毁 IMouse 实例并恢复原始鼠标指针。