Question

我如何确定以下代码中的<代码>.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>

<!- 页: 1



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

基本上,我想增加<代码>。 <代码>.circle 元件离开了<代码>#wrapper元件的可见区域。

Answer 1

类似情况

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

友情链接