零依赖仅3KB的文本高亮魔法Fokus JavaScript高亮库完整入门指南【免费下载链接】Fokus项目地址: https://gitcode.com/gh_mirrors/fo/FokusFokus 是一款零依赖、体积仅约 3KB 的 JavaScript 文本高亮库只要用户选中页面上的任意内容它会立刻用半透明黑色遮罩覆盖其余区域只把选中的文字照亮出来带来影院级的视觉聚焦效果。本文带你从零开始快速上手这个前端小工具。 30 秒看懂Fokus 能帮你做什么选中即高亮鼠标选中任意文字页面其余部分自动变暗选中内容保持清晰锐利轻量到极致压缩后约 3KB零第三方依赖不拖累页面加载动画顺滑遮罩淡入淡出高亮区域平滑跟随选区移动开箱即用引入一行脚本即可无需初始化、无需配置兼容主流浏览器现代浏览器均可使用不支持 IE 与纯触屏设备⚡ 最快集成方法一行脚本接入你的网页如果你本地没有源码可以先克隆仓库git clone https://gitcode.com/gh_mirrors/fo/Fokus然后在你的 HTML 页面中引入压缩版脚本script srcjs/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()APIFokus 会遍历选中范围内的所有节点汇总出最小包围矩形——这正是高亮任何你选中的东西的关键所在。✨ 使用体验中的细节设计滚动实时跟随页面滚动时高亮遮罩立即同步位置不会错位窗口缩放自适应画布尺寸始终与视口保持一致键盘修饰键支持可配置为按住 Ctrl、Shift 等键选中才触发避免与日常复制粘贴冲突防误触右键点击不会启动选区零宽高元素与br节点自动忽略防重复初始化同一页面重复加载脚本也不会重复注册事件这些行为都写在js/fokus.js的事件监听与重绘逻辑中全部代码不到 400 行非常适合作为前端入门的阅读材料。 项目文件结构一览文件路径说明js/fokus.js完整源码注释清晰适合通读学习js/fokus.min.js压缩产物约 3.5KB生产环境引入这个index.html官方演示页选中文字即可体验高亮效果css/demo.css演示页样式与库本身无关README.md项目说明与版本历史LICENSEMIT 开源协议可放心商用❓ 新手常见问题 FAQQ1Fokus 会挡住我的按钮和链接吗不会。遮罩画布设置了鼠标事件穿透点击、悬停等交互完全不受影响。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），仅供参考