isOnScreen, 用于确定元素是否在视口中的简单jQuery插件

分享于 

3分钟阅读

GitHub

  繁體 雙語
Simple jQuery plugin to determine if an element is within the viewport. Optional parameters allow the user to specify a minimum percentage of the element's dimensions that must be visible to qualify.
  • 源代码名称:isOnScreen
  • 源代码网址:http://www.github.com/moagrius/isOnScreen
  • isOnScreen源代码文档
  • isOnScreen源代码下载
  • Git URL:
    git://www.github.com/moagrius/isOnScreen.git
    Git Clone代码到本地:
    git clone http://www.github.com/moagrius/isOnScreen
    Subversion代码到本地:
    $ svn co --depth empty http://www.github.com/moagrius/isOnScreen
    Checked out revision 1.
    $ cd repo
    $ svn up trunk
    

    #jQuery.isOnScreen

    确定元素是否位于视口中的简单jQuery插件。 它不测试任何其他类型的"可视性",如css显示。不透明度。dom中的存在等等- 它只考虑位置。

    如果屏幕上至少有 1个像素可见,当前版本返回 true。

    可选的回调参数被接受,即通过每个边上可以见的像素数。 从当前 node的作用域中调用回调。

    一些示例:

    如果元素在视口中至少有 1像素,则返回 true:

    
    $('selector').isOnScreen();
    
    
    
    

    如果元素区域垂直于视口的最高 10px 位,则返回 true:

    
    $('selector').isOnScreen(function(deltas){
    
    
     return deltas.top> = 10 && deltas.bottom> = 10;
    
    
    });
    
    
    
    

    如果元素区域的垂直的顶部至少位于viewport的底部,则返回 true。

    
    $('selector').isOnScreen(function(deltas){
    
    
     return deltas.top> = 10;
    
    
    }); 
    
    
    
    

    如果元素位于 viewport ( 从技术上来说"可见"- 如果期望用户在不久的时间内查看或者在无限的滚动应用程序中查看内容,这将非常有用。)的底部 100px,则返回 true。

    
    $('selector').isOnScreen(function(deltas){
    
    
     return deltas.top> = -100;
    
    
    }); 
    
    
    
    

    如果元素空间的垂直完全在视口中,则返回 true:

    
    $('selector').isOnScreen(function(deltas){
    
    
     return deltas.top> = this.height() && deltas.bottom> = this.height();
    
    
    });
    
    
    
    

    如果元素完全在视口中,则返回 true:

    
    $('selector').isOnScreen(function(deltas){
    
    
     return deltas.top> = this.height() 
    
    
     && deltas.bottom> = this.height()
    
    
     && deltas.left> = this.width()
    
    
     && deltas.right> = this.width()
    
    
    });
    
    
    
    

    如果元素是 上面的底部,则返回 true。所有(。至少显示 1像素,或者该元素是 上面 viewport,而不是实际可见)。

    
    $('selector').isOnScreen(function(deltas){
    
    
     return deltas.top> = 0;
    
    
    });
    
    
    
    

    相关文章