确定元素是否在包含元素的可见区域内部或外部

如何确定下面代码中的.circle元素是否仍在“屏幕上”？那是否在包含#wrapper元素的可见区域之外？确定元素是否在包含元素的可见区域内部或外部

下面的代码：

<html> 
<style type="text/css"> 
    body { 
     background-color: #000; 
     margin: 2px; 
     padding: 0; 
    } 
    #wrapper { 
     background-color: #ccf; 
     height: 100%; 
     width: 100%; 
     overflow: hidden; 
     position: relative; 
    } 
    .circle { 
     background-color: #fff; 
     width: 80px; 
     height: 80px; 
     border-radius: 40px; 
     -moz-border-radius: 40px; 
     position: absolute; 
     left: 0px; 
     top: 0px; 
    } 
    .stopped { 
     background-color: #ccc; 
    } 
</style>

<script type="text/javascript" 
    src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> 
<script type="text/javascript"> 
function randomDirection(){ 
    var directions = ['+=','+=','+=','-=']; 
    var direction = directions[Math.floor(Math.random()*directions.length)] 
    var amount = Math.floor(Math.random()*40); 
    var unit = 'px'; 
    return direction + amount + unit; 
} 
$(document).ready(function(){ 
    var again = function() { 
     $('.circle:not(".stopped")').each(function(){ 
      $(this).animate({ 
       top: randomDirection(), left: randomDirection() 
      }, 300); 
     }); 
     setTimeout(again, 300); 
    } 
    for (var i=0; i< 50; i++) { 
     $('.circle:first').clone().appendTo('#wrapper'); 
    } 
    $('.circle').click(function(){ 
     $(this).addClass('stopped'); 
    }); 
    again(); 
}); 
</script>

<body><div id="wrapper"><div class="circle">&nbsp;</div></div></body> 
</html>

基本上我想一旦.circle元素留下的可见区域添加.stopped类#wrapper元素。从artlung

来源

2010-07-02 artlung

像

$('.circle.runned').each(function(){ 
    if($(this).offset().left + $(this).width < $('#wraper').offset().left 
     || $(this).offset().left > $('#wraper').width() 
     || $(this).offset().top + $(this).height < $('#wraper').offset().top 
     || $(this).offset().top > $('#wraper').height() 
    ){ 
     $(this).removeClass('runned').addClass('stopped'); 
    } 
});

更新：我修改您的代码以匹配我的，这个伟大的工程，更换我有什么：

var again = function() { 
    // not_stopped = $('.circle:not(".stopped")'); 
    // $('#debug').text(not_stopped.length) 
    $('.circle:not(".stopped")').each(function(){ 
     if ($(this).offset().left + $(this).width < $('#wrapper').offset().left 
      || $(this).offset().left > $('#wrapper').width() 
      || $(this).offset().top + $(this).height < $('#wrapper').offset().top 
      || $(this).offset().top > $('#wrapper').height() 
     ){ 
      $(this).addClass('stopped'); 
     } else { 
      $(this).animate({ 
       top: randomDirection(), left: randomDirection() 
      }, 300); 
    } 
    }); 
    setTimeout(again, 300);

来源

2010-07-02 22:28:14 AHOYAHOY

当然你不是说['.offest（）']（http://api.jquery.com/offset）而不是'.position（）'？ – gnarf 2010-07-02 22:30:58

我不明白你的'.runned'类的目的是什么，我没有任何'.circle'元素中的'.runned'元素。 – artlung 2010-07-02 22:34:32

我已经添加了一个类。运行该脚本没有检查停止的圈子。是.offset（）而不是.position（）会更好 – AHOYAHOY 2010-07-02 23:15:59

确定元素是否在包含元素的可见区域内部或外部

回答

相关问题