零依赖仅3KB的文本高亮魔法：Fokus JavaScript高亮库完整入门指南
【免费下载链接】Fokus项目地址: https://gitcode.com/gh_mirrors/fo/Fokus
Fokus 是一款零依赖、体积仅约 3KB 的 JavaScript 文本高亮库：只要用户选中页面上的任意内容，它会立刻用半透明黑色遮罩覆盖其余区域，只把选中的文字"照亮"出来，带来影院级的视觉聚焦效果。本文带你从零开始，快速上手这个前端小工具。
🎯 30 秒看懂：Fokus 能帮你做什么
- 选中即高亮：鼠标选中任意文字，页面其余部分自动变暗，选中内容保持清晰锐利
- 轻量到极致：压缩后约 3KB，零第三方依赖，不拖累页面加载
- 动画顺滑：遮罩淡入淡出，高亮区域平滑跟随选区移动
- 开箱即用：引入一行脚本即可，无需初始化、无需配置
- 兼容主流浏览器：现代浏览器均可使用（不支持 IE 与纯触屏设备）
⚡ 最快集成方法：一行脚本接入你的网页
如果你本地没有源码，可以先克隆仓库：
git clone https://gitcode.com/gh_mirrors/fo/Fokus然后在你的 HTML 页面中引入压缩版脚本：
<script src="js/fokus.min.js"></script>就这一步——没有构造函数、没有回调参数，加载即生效。想先看看效果，直接打开项目自带的演示页index.html，用鼠标选中页面上任意文字，高亮魔法立刻上演。
🧠 文本高亮原理揭秘：canvas 遮罩 + 挖洞
Fokus 的核心思路非常巧妙，整个过程分四步：
- 动态创建一个铺满整个视口的
<canvas>元素，z-index拉到最大值，并设置鼠标事件穿透 - 用半透明黑色把整块画布填满
- 计算当前选区位置，在选区处"挖"出一个透明洞
- 用
requestAnimationFrame逐帧重绘，配合缓动插值实现丝滑的淡入与跟随动画
几个可在源码js/fokus.js顶部调节的参数：
var PADDING = 5; // 高亮区域四周的留白（像素） var OPACITY = 0.75; // 遮罩的透明度 var MODIFIER = null; // 需要按住才触发的修饰键（如 ctrl）选区计算依赖浏览器原生的window.getSelection()API，Fokus 会遍历选中范围内的所有节点，汇总出最小包围矩形——这正是"高亮任何你选中的东西"的关键所在。
✨ 使用体验中的细节设计
- 滚动实时跟随：页面滚动时高亮遮罩立即同步位置，不会错位
- 窗口缩放自适应：画布尺寸始终与视口保持一致
- 键盘修饰键支持：可配置为按住 Ctrl、Shift 等键选中才触发，避免与日常复制粘贴冲突
- 防误触：右键点击不会启动选区，零宽高元素与
<br>节点自动忽略 - 防重复初始化：同一页面重复加载脚本也不会重复注册事件
这些行为都写在js/fokus.js的事件监听与重绘逻辑中，全部代码不到 400 行，非常适合作为前端入门的阅读材料。
📂 项目文件结构一览
| 文件路径 | 说明 |
|---|---|
js/fokus.js | 完整源码，注释清晰，适合通读学习 |
js/fokus.min.js | 压缩产物约 3.5KB，生产环境引入这个 |
index.html | 官方演示页，选中文字即可体验高亮效果 |
css/demo.css | 演示页样式，与库本身无关 |
README.md | 项目说明与版本历史 |
LICENSE | MIT 开源协议，可放心商用 |
❓ 新手常见问题 FAQ
Q1：Fokus 会挡住我的按钮和链接吗？不会。遮罩画布设置了鼠标事件穿透，点击、悬停等交互完全不受影响。
Q2：移动端能用吗？Fokus 基于鼠标选中事件驱动，目前不支持 IE 浏览器和纯触屏设备。
Q3：体积真的只有 3KB 吗？是的，压缩版约 3.5KB 且零依赖，对页面性能几乎零负担。
Q4：可以自定义遮罩颜色吗？可以。修改源码中的透明度参数OPACITY和填充色即可，改动只需几行代码。
📈 版本演进：一个小而美的成熟作品
从README.md的历史章节可以看到，Fokus 从 0.1 一路迭代到 0.5：先有选区动画与键盘选中支持，再到滚动即时更新、文档偏移元素处理、更快的选中动画……每一步都在打磨体验，是一个持续用心维护的轻量级 JavaScript 文本高亮库。
写在最后
如果你的网页需要"让用户一眼锁定重点"，Fokus 是最省心的选择：3KB 体积、零依赖、一行脚本，文本高亮的魔法即刻生效 ✨。
【免费下载链接】Fokus项目地址: https://gitcode.com/gh_mirrors/fo/Fokus
创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
