元素出现和消失判断组件——lib.appear
依赖:
无
功能:
- 1、指定容器内可视区域内执行回调
- 2、指定容器扩展可视区域范围内的执行
- 3、容器内所有元素回调执行完成后执行
- 4、元素显示事件appear、消失事件disappear,可判断方向
创建一个实例:
var appearInstance = lib.appear.init({
container: '#container',//可选,容器,默认为document
cls: 'lib-appear',//可选,需要遍历的元素
once: true,//可选,是否只触发一次
x: 0,//可选,容器右边距离x以内的元素加载,默认为0
y: 0,//可选,容器底部距离y以内的元素加载,默认为0
onAppear: function(){}//必选,所有容器内的元素到达可视区域内执行的回调
});
实例方法:
appearInstance.bind(node)
node(selector | dom)
添加需要绑定的元素
appearInstance.fire()
判断是否在可视区域并触发相应事件
appearInstance.reset(opts)
重置设置参数,并且重新初始化当前的实例,opts同创建参数
静态方法
lib.appear.init(options)
初始化一个appear的实例
事件
-
显示事件——appear
element.addEventListener('appear', function(ev){});
-
消失事件——disappear
element.addEventListener('disappear', function(ev){});
-
事件对象——ev
- 方向——ev.data.direction(top|right|bottom|left|none)
lib.appear.fireAll()
判断页面所有绑定的元素是否在可视区域并触发相应的事件