Question

我仍然无法让我的碰撞检测设置正常工作。目前，每当div落入页脚时，只有当第一个div实际击中页脚时，其他div才会改变颜色/ CSS。这是问题的全貌：http://i.imgur.com/OdKxdMq.gif

我想要的是让每个div在到达页脚类时改变颜色。我认为在这种情况下只有JS是必要的信息，但请告诉我是否也需要HTML / CSS。

JS：

var links = ["#portfolio", "#hamumu", "#beep", "#jk"];

$(document).ready(function() {

    //if on home page
    if ($("body#home").length > 0) {

        homePage();

    //else if on portfolio page
    } else if ($("body#portfolio").length > 0) {

          //run portfolio function
          portfolioPage();
    }
});

//home page function
function homePage() {

    //initial animations(Math.random()*(2)+1)
    for (var i=0; i<links.length; i++) {

        //animate links
        $(links[i]).animate({
            //have each image fall
            top: '0'
            //put in a slightly random time
        }, 2000*(Math.random()*(3)+1), 'easeOutBounce');
    }    
}

window.setInterval(function() {

    for (var i=0; i<links.length; i++) {

        var link = $(links[i]);
        var footer = $(".footer");

        var x1 = link.offset().left;
        var y1 = link.offset().top;
        var h1 = link.outerHeight(true);
        var w1 = link.outerWidth(true);
        var b1 = y1 + h1;
        var r1 = x1 + w1;

        var x2 = footer.offset().left;
        var y2 = footer.offset().top;
        var h2 = footer.outerHeight(true);
        var w2 = footer.outerWidth(true);
        var b2 = y2 + h2;
        var r2 = x2 + w2;

        if (b1 < y2 || y1 > b2 || r1 < x2 || x1 > r2) {
            return false;
        }

        changeColors(link);
    }

}, 20);

function changeColors(link) {

        link.css("background-color", "red");
}

Answer 1

您应不使用setInterval定期检查元素是否已到达页脚。 jQuery的animate有several callbacks，您可以定义它以获取有关动画进度的信息。

例如，为每个动画元素的每个动画属性调用一次step回调。您应该在哪里放置碰撞检测代码。

查看我刚创建的this fiddle。

碰撞检测：CSS仅在* first * div命中页脚时发生变化

1 个答案: