Déterminer si l'élément est à l'intérieur ou à l'extérieur de la zone visible de l'élément conteneur

Comment puis-je déterminer si les éléments .circle dans le code ci-dessous sont toujours «à l'écran»? Est-ce qu'ils sont en dehors de la zone visible de l'élément contenant #wrapper?Déterminer si l'élément est à l'intérieur ou à l'extérieur de la zone visible de l'élément conteneur

Voici le code:

<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>

Fondamentalement, je veux ajouter une fois l'élément .circle classe .stopped a quitté la zone visible du #wrapper élément.

Source

2010-07-02 artlung

quelque chose comme

$('.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'); 
    } 
});

Mise à jour de artlung: J'ai modifié votre code pour utiliser le mien, et cela fonctionne très bien, en remplacement de ce que j'ai:

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);

Source

2010-07-02 22:28:14 AHOYAHOY

Bien sûr, vous ne signifie pas ['.offest()'] (http://api.jquery.com/offset) au lieu de '.position()'? – gnarf

Je ne comprends pas le but de votre classe '.runned', je n'ai aucun élément' .runned' dans les éléments '.circle'. – artlung

J'ai ajouté une classe .runned que le script n'a pas vérifié les cercles arrêtés. Oui .offset() au lieu de .position() sera mieux – AHOYAHOY

Déterminer si l'élément est à l'intérieur ou à l'extérieur de la zone visible de l'élément conteneur

Répondre

Questions connexes