• 欢迎访问web前端中文站,JavaScript,CSS3,HTML5,web前端demo
  • 如果您觉得本站非常有看点,那么赶紧使用Ctrl+D 收藏web前端中文站吧

emergence.js 教程

JavaScript web前端中文站 2年前 (2017-11-11) 840次浏览 已收录 0个评论

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

更多精彩内容请看 web 前端中文站
http://www.lisa33xiaoq.net 可按 Ctrl + D 进行收藏

介绍?Emergence.js 之前,我在 github 上搜索了一下,它很受用户欢迎,推出没多久就受到了广泛的关注。特别是 JavaScript 项目在 github 上占据有一定的优势。

emergence.js 教程

emergence.js 的特点

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

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

安装

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] {   
 /* Hidden state */ } 
 .element[data-emergence=visible] {   
 /* Visible state */ }

自定义选项

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.lisa33xiaoq.net 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,请确保标准模式。

【注:本文源自网络文章资源,由站长整理发布】


web 前端中文站 , 版权所有丨如未注明 , 均为原创丨本网站采用BY-NC-SA协议进行授权
转载请注明原文链接:emergence.js 教程
喜欢 (0)
发表我的评论
取消评论
表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址