【云端书签】悬浮球教程

05 悬浮球使用教程

悬浮球是一个可选的快捷入口，在网页右侧显示一个可拖动的小球，点击就能打开云端书签。

如何开启/关闭悬浮球

  1. 打开设置页面。
  2. 找到「悬浮球设置」区域。
  3. 勾选「开启悬浮球」就开启，取消勾选就关闭。
  4. 修改后立即生效，所有打开的网页都会自动显示或隐藏悬浮球。

默认是关闭的，你需要手动开启。

如何使用悬浮球

点击打开弹窗

  • 单击悬浮球，就会打开云端书签弹窗，和你点击工具栏图标的效果一样。

拖动改变位置

  • 按住悬浮球不要松开。
  • 上下拖动就能改变它在屏幕右边的位置。
  • 松开就停在那里。

自动贴边

  • 你拖动完松开鼠标后，悬浮球会自动贴到屏幕边缘，减少遮挡网页内容。
  • 只有你点击或拖动它时才会完全显示。

自定义设置

默认位置

在设置里可以选择悬浮球默认出现在哪里：

  • 自动：靠屏幕右边。
  • 靠左：靠屏幕左边。
  • 靠右：靠屏幕右边（默认）。

点击行为

可以设置点击悬浮球做什么：

  • 打开弹窗（默认）：点击就打开云端书签弹窗。
  • 一键保存当前页面：点击就直接把当前网页添加到书签，然后打开编辑界面。

调整大小

悬浮球默认大小是 48×48 像素。如果你觉得不合适，可以自己改大小：

  1. 打开项目里的 content/floating-ball.js 文件。
  2. 找到第 271 行左右的样式定义部分。
  3. 修改 width、height 和 font-size 三个值：

小尺寸推荐： 

width: 40px;  
height: 40px;  
font-size: 20px;

默认尺寸（不用改就是这个）： 

width: 48px;  
height: 48px;  
font-size: 24px;

大尺寸推荐： 

width: 56px;  
height: 56px;  
font-size: 28px;

超大尺寸推荐： 

width: 64px;  
height: 64px;  
font-size: 32px;
  1. 保存文件，然后在浏览器扩展管理页重新加载扩展。
  2. 刷新网页，新大小就生效了。

提示：记得保持 width 和 height 相等，这样才是圆形。font-size 大约是 width 的一半比较好看。

常见问题

Q: 悬浮球会遮挡网页内容吗？

A: 不会。不用的时候它会自动贴边并且变半透明，只留很小一条边，很少会遮挡重要内容。

Q: 缩放网页后悬浮球会跑到屏幕外面吗？

A: 不会。代码会自动检查，保证悬浮球始终在可视区域内。改变浏览器窗口大小、缩放网页都会自动调整位置。

Q: 哪些浏览器支持悬浮球？

A: 所有支持扩展的现代浏览器都支持。Chrome、Edge、Firefox 在电脑和手机上都能用。

Q: 开启悬浮球后网页会卡吗？

A: 不会。悬浮球代码很轻量，只会在你拖动或点击的时候运行，不会影响网页性能。