浅谈Emergence.js 检测元素可见性的 js 插件


Posted in Javascript onNovember 18, 2017

Emergence.js 是一个轻量级,高性能的 JS 插件,用于检测和操作浏览器中的元素。

这个插件被设计为允许根据浏览器中的可见性对元素进行操作。它使开发人员可以自由使用自己的 CSS 或JS 来查看动画还是状态的改变。它利用 HTML5 数据属性而不是类来简化开发。Emergence.js 是同类型中最轻,最兼容的插件之一。

emergence.js 的特点

  1. 无需依赖其他组件
  2. 支持IE8 +和所有现代浏览器
  3. 压缩后只有1kb

安装

Emergence.js 的安装非常的简单。npm的安装方法如下:

npm install emergence.js

另外我们也可以直接下载它,在html文件中引入Emergence.js即可。

<script src="path/to/emergence.min.js"></script>
<script>
 emergence.init();
</script>

如何使用

添加 data-emergence="hidden" 到您想要观看的任何元素:

< div class = “ element ” data-emergence = “ hidden ” > </ div >

当元素在视口内变得可见时,属性将变为 data-emergence="visible" 。现在,您可以利用CSS来动画元素:

.element [ data-emergence = hidden ] {
 / *隐藏状态* /
}
.element [ data-emergence = visible ] {
 / *可见状态* / 
}

自定义选项

Emergence.js有许多选项可以自定义。下面是默认值:

emergence.init({
 container: window,
 reset: true,
 handheld: true,
 throttle: 250,
 elemCushion: 0.15,
 offsetTop: 0,
 offsetRight: 0,
 offsetBottom: 0,
 offsetLeft: 0,
 callback: function(element, state) {
 if (state === 'visible') {
  console.log('Element is visible.');
 } else if (state === 'reset') {
  console.log('Element is hidden with reset.');
 } else if (state === 'noreset') {
  console.log('Element is hidden with NO reset.');
 }
 }
});

选项说明

container:容器,默认情况下,元素的可见性将由窗口的视口尺寸和X / Y滚动位置(设置为window)确定。但是,可以将其更改为自定义容器。例如:

var customContainer = document.querySelector('.wrapper');
// www.xttblog.com
emergence.init({
 container: customContainer
});

Throttle:是一种防止与滚动和调整事件大小相关的性能问题的方法。油门将创建一个小的超时,并在事件过程中每隔一定的毫秒量稳定地检查元素的可见性。默认是250。

reset:确定数据属性状态是否在显示后重置。false如果您希望元素即使在离开视口后仍保持其显示状态,请将其重置为。默认是true。

handheld:Emergence将为大多数手持设备型号(如手机和平板电脑)进行检查。设置false为时,插件将不会在这些设备上运行。默认是true。

elemCushion:元素坐标将决定在视口内需要多少元素才算“可见”。0.5的值将等于50%的元素需要可见。默认是0.15。

offsetTop, offsetRight, offsetBottom, offsetLeft:在视口的任何边上提供偏移量(以像素为单位)。如果您有一个固定的组件(例如标题),那么这非常有用,您可以为标题的高度偏移相同的值。100应用于的值offsetTop将意味着元素只有在距离视口顶部大于100像素时才会被视为可见。所有的默认值是0。

callback:用于提供回调来确定元素何时可见,隐藏和重置。可能的状态是visible,reset和noreset。

另外Emergence.js还提供了两个高级方法emergence.engage();和emergence.disengage();他们的作用刚好相反。

Emergence.js依赖于以下浏览器API:querySelectorAll 

为了支持IE8,请确保标准模式。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jquery tools之tooltip
Jul 25 Javascript
document.documentElement的一些使用技巧
Apr 18 Javascript
jQuery 无限级菜单的简单实例
Feb 21 Javascript
网页从弹窗页面单选框传值至父页面代码分享
Sep 29 Javascript
Bootstrap布局方式详解
May 27 Javascript
浅析Javascript中bind()方法的使用与实现
May 30 Javascript
JS表格组件BootstrapTable行内编辑解决方案x-editable
Sep 01 Javascript
Iphone手机、安卓手机浏览器控制默认缩放大小的方法总结(附代码)
Aug 18 Javascript
浅谈webpack 构建性能优化策略小结
Jun 13 Javascript
关于js陀螺仪的理解分析
Apr 11 Javascript
构建Vue大型应用的10个最佳实践(小结)
Nov 07 Javascript
微信小程序wx.getUserInfo授权获取用户信息(头像、昵称)的实现
Aug 19 Javascript
基于jquery实现五星好评
Nov 18 #jQuery
基于JavaScript实现五子棋游戏
Aug 26 #Javascript
JavaScript canvas实现围绕旋转动画
Nov 18 #Javascript
Vue2.0设置全局样式(less/sass和css)
Nov 18 #Javascript
五步轻松实现JavaScript HTML时钟效果
Mar 25 #Javascript
深入研究React中setState源码
Nov 17 #Javascript
Vue.js在数组中插入重复数据的实现代码
Nov 17 #Javascript
You might like
虹吸式咖啡探讨–研磨
2021/03/03 冲泡冲煮
php中文件上传的安全问题
2006/10/09 PHP
PHP异步调用socket实现代码
2012/01/12 PHP
PHP 循环删除无限分类子节点的实现代码
2013/06/21 PHP
Yii中srbac权限扩展模块工作原理与用法分析
2016/07/14 PHP
用Greasemonkey 脚本收藏网站会员信息到本地
2009/10/26 Javascript
12个非常有创意的JavaScript小游戏
2010/03/18 Javascript
JavaScript和JQuery实用代码片段(一)
2010/04/07 Javascript
jquery学习笔记二 实现可编辑的表格
2010/04/09 Javascript
ExtJs的Date格式字符代码
2010/12/30 Javascript
javascript中parseInt()函数的定义和用法分析
2014/12/20 Javascript
jQuery简单实现QQ空间点赞已经取消点赞
2015/04/02 Javascript
纯javascript实现四方向文本无缝滚动效果
2015/06/16 Javascript
JavaScript的类型、值和变量小结
2015/07/09 Javascript
基于jquery实现可定制的web在线富文本编辑器附源码下载
2015/11/17 Javascript
BootStrap Fileinput上传插件使用实例代码
2017/07/28 Javascript
使用Node.js实现ORM的一种思路详解(图文)
2017/10/24 Javascript
js中关于Blob对象的介绍与使用
2019/11/29 Javascript
Vue记住滚动条和实现下拉加载的完美方法
2020/07/31 Javascript
[46:50]Liquid vs Mineski 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
numpy.random.seed()的使用实例解析
2018/02/03 Python
python字符串的拼接方法总结
2019/11/18 Python
python机器学习库xgboost的使用
2020/01/20 Python
python time()的实例用法
2020/11/03 Python
Gap中国官网:美式休闲风服饰
2017/02/05 全球购物
Charles&Keith美国官方网站:新加坡快时尚鞋类和配饰零售商
2019/11/27 全球购物
为什么在使用动态 SQL 语句时必须为低层数据库对象授予权限
2012/12/13 面试题
什么是网络协议
2016/04/07 面试题
自动化系在校本科生求职信
2013/10/23 职场文书
初一英语教学反思
2014/01/11 职场文书
粗加工管理制度
2014/02/04 职场文书
管理部副部长岗位职责范文
2014/03/09 职场文书
政协调研汇报材料
2014/08/15 职场文书
2014最新毕业证代领委托书
2014/09/26 职场文书
2015年元宵节活动总结
2015/02/06 职场文书
运动会口号霸气押韵
2015/12/24 职场文书