3分钟快速上手如何在你的网站上用Fokus实现选中文字聚光灯高亮效果【免费下载链接】Fokus项目地址: https://gitcode.com/gh_mirrors/fo/FokusFokus 是一个零依赖、仅约 3KB 的轻量级 JavaScript 聚光灯高亮库用户在网页上选中任意文字时Fokus 会立即用半透明黑色遮罩覆盖整页只把选区照亮像舞台聚光灯一样聚焦视线。只需引入一个脚本文件无需任何配置3 分钟即可给你的博客、文档站或落地页加上这个惊艳的交互细节。为什么选择 Fokus一个 3KB 的视觉细节库给网页加选中文字高亮效果传统做法要自己监听选区变化、计算坐标、绘制遮罩往往要写上百行代码。而 Fokus 把这一切压缩进一个极小的脚本里体积极小压缩后约 3KB几乎不增加页面加载负担零依赖不引入任何第三方库不与现有前端框架冲突动画顺滑遮罩淡入淡出、高亮区域平滑跟随基于requestAnimationFrame逐帧渲染即插即用引入即用不需要写一行初始化代码自动回收取消选中后遮罩自动淡出并移除 DOM不留残余元素一句话总结它解决的是让用户读到的内容被视觉强调这一体验问题特别适合长文阅读类页面。最快上手一行脚本引入 Fokus整个过程只需要两步。第一步获取脚本文件方式一直接克隆仓库获取git clone https://gitcode.com/gh_mirrors/fo/Fokus方式二也可以只拿你真正需要的那一个文件js/fokus.min.js—— 压缩版线上环境推荐使用js/fokus.js—— 可读的完整版源码便于调试学习第二步在 HTML 中引入在页面/body标签前加入一行即可参考仓库自带的演示页index.htmlscript srcjs/fokus.min.js/script完成刷新页面用鼠标选中任意一段文字试试——整页瞬间暗下来只留下你选中的文字区域清晰可见。就这么简单没有任何初始化函数要调用。效果解析Fokus 聚光灯是怎么实现的不用深挖代码也能明白它的工作方式这也是它轻量却不简陋的原因监听选区通过浏览器原生window.getSelection()获取用户选中的节点并遍历计算出选区的整体边界Canvas 遮罩动态创建一个覆盖整个视口的canvas填充 75% 透明度的黑色挖空高亮区用clearRect把选区范围剪出来四周预留 5px 内边距形成聚光灯效果补间动画透明度与高亮区域都做缓动插值所以遮罩淡入、选区移动都很顺滑核心逻辑全部封装在js/fokus.js这个约 400 行的单文件里想学习选区监听 Canvas 遮罩这种前端技巧的话它是极佳的轻量范例。如何自定义修改 3 个核心参数如果你想在压缩版js/fokus.min.js之上做个性化可以基于可读版js/fokus.js修改文件顶部的三个常量再自行压缩参数默认值作用PADDING5高亮区域四周预留的像素间距OPACITY0.75遮罩层的最大不透明度0~1MODIFIERnull需要按住哪个修饰键如ctrl才触发高亮null表示随时触发例如把MODIFIER设为shift就可以做成按住 Shift 选中才点亮的隐蔽玩法避免影响日常阅读。常见问题Fokus 支持哪些浏览器QFokus 能用在移动端或 IE 上吗不能。Fokus 依赖addEventListener与pointer-events等能力兼容大部分现代浏览器但不支持 IE 和触屏设备手机/平板上没有鼠标选区行为。Q会影响页面性能吗几乎不会。没有选区时脚本处于空闲状态取消选中后遮罩画布会被直接从 DOM 移除不占用任何资源。Q有授权限制吗Fokus 采用 MIT 协议发布见LICENSE个人和商用项目都可以自由使用、修改和分发。Q有浏览器插件吗有的Fokus 同时提供 Chrome 扩展可以在任何网站上体验聚光灯效果无需自己部署。小结3 分钟换来的阅读体验升级回顾一下这次的快速上手路径克隆仓库或下载js/fokus.min.js在/body前引入一行脚本选中文字见证聚光灯效果用不到 3KB 的代码为网站增加一个记忆点这正是微交互设计的价值。如果你做的是技术博客、产品文档或营销落地页强烈建议花这 3 分钟试一次——读者选中文字的那一刻你的页面会瞬间高级起来。✨【免费下载链接】Fokus项目地址: https://gitcode.com/gh_mirrors/fo/Fokus创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考