gpt4 book ai didi

javascript - 迭代元素重叠/碰撞函数

转载 作者:行者123 更新时间:2023-12-02 22:53:06 26 4
gpt4 key购买 nike

我有一个工作函数,可以检测方形指示器是否与具有深色背景的行重叠。如果重叠,指示器应变为白色,如果不重叠,指示器应为黑色。

我陷入困境的部分是我有很多带有深色背景的行,并且它目前仅适用于第一个深色背景,因为我没有迭代所有深色背景,而只是迭代第一个。

我尝试将每个函数放置在多个位置,但似乎无法使其工作。

jsfiddle here

function isColliding() {
// Div 1 data
var indicator_offset = $('.indicator').offset();
var indicator_height = $('.indicator').outerHeight(true);
var indicator_width = $('.indicator').outerWidth(true);
var indicator_distance_from_top = indicator_offset.top + indicator_height;
var indicator_distance_from_left = indicator_offset.left + indicator_width;

// Div 2 data
var dark_row_offset = $('.dark').offset();
var dark_row_height = $('.dark').outerHeight(true);
var dark_row_width = $('.dark').outerWidth(true);
var dark_row_distance_from_top = dark_row_offset.top + dark_row_height;
var dark_row_distance_from_left = dark_row_offset.left + dark_row_width;

var not_colliding = (indicator_distance_from_top < dark_row_offset.top || indicator_offset.top > dark_row_distance_from_top || indicator_distance_from_left < dark_row_offset.left || indicator_offset.left > dark_row_distance_from_left);

return !not_colliding;
};

$(window).on('scroll', function() {
if (isColliding()) {
$('.indicator').removeClass('on-light').addClass('on-dark');
} else {
$('.indicator').removeClass('on-dark').addClass('on-light');
}
})
.row {
height: 200px;
width: 100%;
}
.row.light {
background-color: #eeeeee;
}
.row.dark {
background-color: black;
}

.indicator {
width: 30px;
height: 30px;
position: fixed;
top: 0px;
left: 50%;
transfrom: translateX(-50%);
}
.indicator.on-light {
background-color: black;
}
.indicator.on-dark {
background-color: white;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="indicator on-light">

</div>

<div class="row light">

</div>
<div class="row dark">

</div>
<div class="row light">

</div>
<div class="row dark">

</div>
<div class="row light">

</div>
<div class="row dark">

</div>
<div class="row light">

</div>
<div class="row dark">

</div>
<div class="row light">

</div>
<div class="row dark">

</div>
<div class="row light">

</div>
<div class="row dark">

</div>
<div class="row light">

</div>
<div class="row dark">

</div>
<div class="row light">

</div>
<div class="row dark">

</div>
<div class="row light">

</div>
<div class="row dark">

</div>
<div class="row light">

</div>
<div class="row dark">

</div>
<div class="row light">

</div>
<div class="row dark">

</div>
<div class="row light">

</div>
<div class="row dark">

</div>
<div class="row light">

</div>
<div class="row dark">

</div>
<div class="row light">

</div>
<div class="row dark">

</div>
<div class="row light">

</div>
<div class="row dark">

</div>
<div class="row light">

</div>
<div class="row dark">

</div>

最佳答案

您的代码仅检查第一个“暗”元素,而不是循环遍历所有暗元素。因此,请按如下方式更改您的方法以使其正常工作 https://jsfiddle.net/x5fw2z3s/ 。我相信您可以进一步优化它。

 function isColliding() {
// Div 1 data
var indicator_offset = $('.indicator').offset();
var indicator_height = $('.indicator').outerHeight(true);
var indicator_width = $('.indicator').outerWidth(true);
var indicator_distance_from_top = indicator_offset.top + indicator_height;
var indicator_distance_from_left = indicator_offset.left + indicator_width;

var isCollidingAtLeastOneDark = false;

$( '.dark' ).each(function( index ) {
var dark_row_offset = $(this).offset();
var dark_row_height = $(this).outerHeight(true);
var dark_row_width = $(this).outerWidth(true);
var dark_row_distance_from_top = dark_row_offset.top + dark_row_height;
var dark_row_distance_from_left = dark_row_offset.left + dark_row_width;

var not_colliding = (indicator_distance_from_top < dark_row_offset.top || indicator_offset.top > dark_row_distance_from_top || indicator_distance_from_left < dark_row_offset.left || indicator_offset.left > dark_row_distance_from_left);

if( !not_colliding) {
isCollidingAtLeastOneDark = true;
return false; //breakout from loop
}
});
console.log(isCollidingAtLeastOneDark);
return isCollidingAtLeastOneDark;
};

关于javascript - 迭代元素重叠/碰撞函数,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58106969/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com