fly63前端网

www.fly63.com

首页文章资源工具教程 栏目
  • 关于我们
  • 网站投稿
  • 赞助一下
搜索

在线工具_工作生活好帮手

打造各种简单、易用、便捷的在线工具,网友无需注册和下载安装即可使用

点击查看

关闭

提交网站

eadremaining.js
分享
复制链接
新浪微博
QQ 好友

扫一扫分享

网站地址:http://aerolab.github.io/readremaining.js/
GitHub:https://github.com/Aerolab/readremaining.js
网站描述:记录用户滚动页面的时间差jQuery插件

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'});

链接: https://fly63.com/nav/1080

more>>
相关栏目
jQuery之家
致力于搜集和整理各种jQuery插件,jQuery特效...
官网
fullPage.js
jQuery全屏滚动插件
官网GitHub
Waterfall.js
瀑布流无限加载插件
官网GitHub
Raty
一个非常棒的jQuery 评分插件
官网GitHub
Bootstrap-waterfall
一款基于Bootstrap仿Pinterest网站的网格瀑布流插件
官网GitHub
Jcrop
一个功能强大的 jQuery 图像裁剪插件
官网GitHub
jcarousel
jQuery轮播图插件
官网GitHub
Parallax.js
一款jQuery滚动视觉差插件
官网GitHub
vegas
一个jQuery / Zepto幻灯片插件
官网GitHub
paroller.js
一款轻量级的页面滚动视觉差特效jquery插件
官网GitHub
lazyload.js
jquery图片懒加载插件
官网GitHub
alertify.js
jQuery酷炫的各种消息提示插件
官网GitHub
pickadate.js
一个轻量级的 jQuery 日期选择插件
官网GitHub
chosen.js
基于jquery的下拉选择框美化插件
官网GitHub
threesixty.js
360度产品图片预览jQuery插件
官网GitHub
textillate.js
实现动感的 CSS3 文本动画的简单插件
官网GitHub

手机预览