Image placeholder

ReadRemaining.js – 记录用户滚动页面的时间差jQuery插件

Image placeholder
F2EX 2017-01-10

ReadRemaining.js 是一个记录用户滚动页面的时间差 jQuery 插件,可以显示用户滚动页面的速度,以判断用户读取文章需要多长时间考虑。

用法

在 jQuery 之后加载 readremaining.jquery.js 或压缩版本 readremaining.jquery.min.js 。
同时包括css文件或样式到你的主要CSS。

<script src="js/readremaining.jquery.js"></script>
<link rel="stylesheet" href="css/rr_light.css"/>

为了加快加载速度,可以在主js文件中包含 readremaining.jquery.js 的代码。

初始化 ReadRemaining.js 将被滚动以读取文章的元素。通常是文档的正文。

$('body').readRemaining();

自定义 ReadRemaining.js

你可以使用以下选项自定义测量仪的行为:

$('body').readRemaining({
  showGaugeDelay   : 1000,           // 显示指示器之前延迟。
  showGaugeOnStart : false,          // 最初显示仪表,甚至在用户滚动之前。
  timeFormat       : '%mm %ss left', // 将用分和秒替换%m和%s。
  maxTimeToShow    : 20*60,          // 仅在低于x分钟(乘以秒)时显示时间.
  minTimeToShow    : 10,             // 只有显示时间,如果高于x秒(如果它小于10秒...只读)。
  gaugeContainer   : '',             // 计量器将附加的元素。如果left'',容器将是同一个滚动元素。
  insertPosition   : 'prepend'       // 'append' 或者 'prepend' 根据风格要求
  verboseMode      : false           // 启用控制台日志。 仅用于测试。
  gaugeWrapper     : '',             // 可选,定义可见范围的元素。如果为“”,仪表将一直可见。
  topOffset        : 0,              // 在 gaugeWrapper 的顶部和测量仪将开始出现的点之间的距离。一些设计需要这样。
  bottomOffset     : 0               // 框出现的底边框和元素底部之间的距离。
});
其他方法

你可以通过使用“getRemainingTime”方法获取ReadRemaining.js读取元素的剩余时间。例如:

var remainingMinutes = $('body').readRemaining('getRemainingTime', {timeFormat : '%m'});

2017-01-10