appear, 在视图中,在dom元素出现时执行回调

分享于 

4分钟阅读

GitHub

  繁體 雙語
execute callbacks when dom elements appear in and out of view
  • 源代码名称:appear
  • 源代码网址:http://www.github.com/creativelive/appear
  • appear源代码文档
  • appear源代码下载
  • Git URL:
    git://www.github.com/creativelive/appear.git
    Git Clone代码到本地:
    git clone http://www.github.com/creativelive/appear
    Subversion代码到本地:
    $ svn co --depth empty http://www.github.com/creativelive/appear
    Checked out revision 1.
    $ cd repo
    $ svn up trunk
    
    appear 出现

    跟踪dom元素的可见性,并在用户定义的回调出现和消失时触发它们。

    演示

    请务必查看关于项目页面的文档。

    用法

    在页面中包含 appear.js,它没有相关性。

    调用 appear() 以下列方式传递对象:

    • 当dom是交互式的,但在 appear.js 开始跟踪之前运行的init 函数。
    • 返回要跟踪的元素的的函数。 dom在这个时候是交互式的。 可以是一个现有的HTMLCollection而不是一个函数。
    • 当元素处于视图中时,将运行 appear 函数,传递到视图中的元素。 如果定义,appear.js 将跟踪元素,直到它们进入视图。
    • 当元素超出视图时运行 disappear 函数,传递出已经超出视图范围的元素。 如果定义,appear.js 将跟踪元素直到它们脱离视图。
    • reappear 如果 true appear.js 将跟踪元素的连续出现和 dissappears。 默认值为 false。
    • bounds 以像素的形式增加,以像素为单位,以便它在实际上在视口中可以是"查看"。
    • 由于性能上的原因,如果在最后一个事件结束后,这里检查只发生一次,则 debounce appear.js 会跟踪浏览器滚动和调整大小,原因是对多个事件执行一次。 你可以在这里重写这里值。
    • 另外,除了去抖,还会在连续缓慢滚动时检查项目,你可以控制滚动的速度是多少。 默认值为 50 ( 象素)。
    • 在成功的增量速度检查之后,将不会再次检查可以查看项,直到该超时超时。 默认值为 500 ( ms )。
    • 当 appear.js 不再跟踪任何项目和事件侦听器时,done 函数被调用。

    示例

    appear({
     init:functioninit(){
     console.log('dom is ready');
     },
     elements:functionelements(){
     // work with all elements with the class"track"returndocument.getElementsByClassName('track');
     },
     appear:functionappear(el){
     console.log('visible', el);
     },
     disappear:functiondisappear(el){
     console.log('no longer visible', el);
     },
     bounds:200,
     reappear:true});

    api

    appear() 将返回一个包含以下内容的对象:

    • trigger() 强制检查可以查看元素。
    • pause() 暂时停止跟踪元素。
    • resume() 恢复跟踪元素。
    • destroy() 永久停止跟踪元素。

    下载

    或者缩小

    appear.js logo 设计由 Magicon,来自名词项目: :Creative Commons - 属性( CC到 3.0 )


    VIEW  CAL  EXE  DOM  调用  EXEC  
    相关文章