javascript - 构建网络阅读辅助工具 : row selector

标签 javascript css

我一直在尝试制作一个行标记脚本来帮助我在线阅读文本。当我看书时,我总是用尺子或纸。在网上,我没有这个选项,通常会迷失在文本中。

W - move div up
S - move div down

JS fiddle for my current effort (S = down, W = up)

我能想到的最好的办法是让所有文本元素的行高相等,但这会使样式变得非常困难。此外,我希望能够在控制台中运行它以在任何网站上启用它(或将其作为附加组件安装)。

有没有更好的方法来设计这样的工具,使其更能适应未知内容?

  • 我当然可以选择文本,而且我经常这样做。通常,它会导致我只选择一些词 -> 注意力会集中在那个词上,这是我想要避免的。
  • 我也可以使用辅助窗口,我有时会这样做。但它有点不稳定,一旦你点击它就会消失。
  • 跟随鼠标指针的 div 是可能的,但它太不稳定,感觉就像有什么东西卡在了你的手指上。

编辑:我用更改更新了 fiddle 。我保留了 javascript,因为没有它,您将无法将标尺移动到文本的下半部分。 Updated reading-ruler

最佳答案

您可以为 .ruler 设置 position: fixed 而不是 JavaScript。它将始终保持在同一个位置,因此您可以阅读其下方带有 .ruler 元素的文本。

这是 jsFiddle。 http://jsfiddle.net/RxDpP/1/

关于javascript - 构建网络阅读辅助工具 : row selector,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19724822/

相关文章:

javascript - Mouseup 事件在 Swiper 中不起作用

javascript - PHP 加/减按钮无法正常工作

javascript - 上传前检测文件大小问题

html - 缩放背景图像,使其始终保持纵横比并居中

html - 如果进度条值为 0,则不要在右侧添加边框

css - 如何将 Bootstrap 的容器 div 调整到左视口(viewport)边缘 100px?

javascript - ng-model 绑定(bind)不适用于 ng-template

javascript - 如何在 jQuery 委托(delegate)中引用 html 或文本?

html - 使用 HTML 中的类居中彩色字母文本

jquery - 自定义图像 slider 问题(图像撞到新行)