浅谈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 相关文章推荐
Extjs学习笔记之六 面版
Jan 08 Javascript
基于jquery的cookie的用法
Jan 10 Javascript
textarea中的手动换行处理的jquery代码
Feb 26 Javascript
当某个文本框成为焦点时即清除文本框内容
Apr 28 Javascript
JS获取客户端IP地址、MAC和主机名的7个方法汇总
Jul 21 Javascript
Javascript this 关键字 详解
Oct 22 Javascript
关于Webpack dev server热加载失败的解决方法
Feb 22 Javascript
微信小程序实现分享到朋友圈功能
Jul 19 Javascript
解决vue中修改了数据但视图无法更新的情况
Aug 27 Javascript
解决vue项目刷新后,导航菜单高亮显示的位置不对问题
Nov 01 Javascript
webpack优化之代码分割与公共代码提取详解
Nov 22 Javascript
类和原型的设计模式之复制与委托差异
Jul 07 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
php 页面执行时间计算代码
2008/12/04 PHP
微信API接口大全
2015/04/15 PHP
PHP7多线程搭建教程
2017/04/21 PHP
yii2的restful api路由实例详解
2019/05/14 PHP
JQuery在光标位置插入内容的实现代码
2010/06/18 Javascript
jquery制作弹窗提示窗口代码分享
2014/03/02 Javascript
jQuery动态生成表格及右键菜单功能示例
2017/01/13 Javascript
NodeJS处理Express中异步错误
2017/03/26 NodeJs
深入理解Vue 的条件渲染和列表渲染
2017/09/01 Javascript
vue-cli3.0 环境变量与模式配置方法
2018/11/08 Javascript
vue 实现一个简单的全局调用弹窗案例
2020/09/10 Javascript
[52:15]2014 DOTA2国际邀请赛中国区预选赛5.21 HGT VS LGD-GAMING
2014/05/23 DOTA
Python中的字典遍历备忘
2015/01/17 Python
编写Python脚本来实现最简单的FTP下载的教程
2015/05/04 Python
利用Python暴力破解zip文件口令的方法详解
2017/12/21 Python
基于Python中random.sample()的替代方案
2020/05/23 Python
Python 解决相对路径问题:&quot;No such file or directory&quot;
2020/06/05 Python
python中的测试框架
2020/11/13 Python
CSS3实现曲线阴影和翘边阴影
2016/05/03 HTML / CSS
浅谈css3新单位vw、vh、vmin、vmax的使用详解
2017/12/01 HTML / CSS
鲜为人知的HTML5语音合成功能
2019/05/17 HTML / CSS
希尔顿酒店中国网站:Hilton中国
2017/03/11 全球购物
利物浦足球俱乐部官方网上商店:Liverpool FC Official Store
2018/01/13 全球购物
英国可持续奢侈品包包品牌:Elvis & Kresse
2018/08/05 全球购物
Wilson体育用品官网:美国著名运动器材品牌
2019/05/12 全球购物
网络安全方面的面试题
2015/11/04 面试题
网上开商店的创业计划书
2014/01/19 职场文书
应聘编辑自荐信范文
2014/03/12 职场文书
美丽乡村建设实施方案
2014/03/23 职场文书
倡导文明标语
2014/06/16 职场文书
最美孝心少年事迹材料
2014/08/15 职场文书
党的群众路线教育实践活动心得体会范文
2014/11/05 职场文书
商务英语邮件开头问候语
2015/11/10 职场文书
会计继续教育培训心得体会
2016/01/19 职场文书
如何用PHP实现分布算法之一致性哈希算法
2021/05/26 PHP
Oracle中日期的使用方法实例
2022/07/07 Oracle