浅谈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 相关文章推荐
js动态添加onclick事件可传参数与不传参数
Jul 29 Javascript
js文本框走动跑马灯效果代码分享
Aug 25 Javascript
JavaScript缓冲运动实现方法(2则示例)
Jan 08 Javascript
JavaScript中的boolean布尔值使用学习及相关技巧讲解
May 26 Javascript
JavaScript实现多栏目切换效果
Dec 12 Javascript
VUE多层路由嵌套实现代码
May 15 Javascript
jQuery实现简单的下拉菜单导航功能示例
Dec 07 jQuery
浅谈基于Vue.js的移动组件库cube-ui
Dec 20 Javascript
vue-vuex中使用commit提交mutation来修改state的方法详解
Sep 16 Javascript
通过扫小程序码实现网站登陆功能
Aug 22 Javascript
微信小程序获取用户信息及手机号(后端TP5.0)
Sep 12 Javascript
jQuery实现简单评论区功能
Oct 26 jQuery
基于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 strlen mb_strlen计算中英文混排字符串长度
2009/07/10 PHP
基于PHP输出缓存(output_buffering)的深入理解
2013/06/13 PHP
PHP中的数组处理函数实例总结
2016/01/09 PHP
js实现权限树的更新权限时的全选全消功能
2009/02/17 Javascript
ASP.NET jQuery 实例11 通过使用jQuery validation插件简单实现用户登录页面验证功能
2012/02/03 Javascript
javaScript矢量图表库-gRaphael几行代码实现精美的条形图/饼图/点图/曲线图
2013/01/09 Javascript
定时器(setTimeout/setInterval)调用带参函数失效解决方法
2013/03/26 Javascript
JQuery EasyUI 数字格式化处理示例
2014/05/05 Javascript
javascript中的throttle和debounce浅析
2014/06/06 Javascript
connect中间件session、cookie的使用方法分享
2014/06/17 Javascript
容易造成JavaScript内存泄露几个方面
2014/09/04 Javascript
JS简单随机数生成方法
2016/09/05 Javascript
BootstrapValidator实现注册校验和登录错误提示效果
2017/03/10 Javascript
Vue项目中配置pug解析支持
2019/05/10 Javascript
微信小程序实现form表单本地储存数据
2019/06/27 Javascript
vue-cli+webpack项目打包到服务器后,ttf字体找不到的解决操作
2020/08/28 Javascript
微信小程序实现购物车小功能
2020/12/30 Javascript
python多线程用法实例详解
2015/01/15 Python
Python迭代器与生成器用法实例分析
2018/07/09 Python
Python3最长回文子串算法示例
2019/03/04 Python
Python中dict和set的用法讲解
2019/03/28 Python
python动态进度条的实现代码
2019/07/03 Python
python递归调用中的坑:打印有值, 返回却None
2020/03/16 Python
Selenium之模拟登录铁路12306的示例代码
2020/07/31 Python
python绘制分布折线图的示例
2020/09/24 Python
Python爬虫教程之利用正则表达式匹配网页内容
2020/12/08 Python
canvas拼图功能实现代码示例
2018/11/21 HTML / CSS
世界上获奖最多的手机镜头:Olloclip
2018/03/03 全球购物
大一军训感言
2014/01/09 职场文书
宿舍卫生检讨书
2014/01/16 职场文书
煤矿安全协议书
2014/08/20 职场文书
班级光棍节联谊会策划书
2014/10/10 职场文书
升职自我推荐信范文
2015/03/25 职场文书
有关骆驼祥子的读书笔记
2015/06/26 职场文书
文明礼貌主题班会
2015/08/14 职场文书
Nginx 匹配方式
2022/05/15 Servers