自本周初以来,我一直在尝试完成这项工作,但无法弄清楚。我的 HTML 文件中有两个元素。它们在同一垂直 channel 上,每次单击按钮时,element1 向左水平移动 60em。我必须比较这两个元素的位置,并使用 if/else 语句检测 element1 是否已通过 element2。当它通过时,我想将 element1 移动到它的初始位置并重新开始。但是如果语句从不射击,它总是跳转到 else 语句。
我尝试比较以下属性:
$('#elemet1').position();
$('#elemet1').position().left;
$('#elemet1').offset();
$('#elemet1').offsetLeft;
$('#elemet1').css("position");
$('#elemet1').css("left");
$('#elemet1').css("margin");
$('#elemet1').left;
我试着比较如下位置:
$(function () {
$("button").click(function () {
var position1 = $('#element1').css("left");
var position2 = $('#element2').css("left");
if (position1 <= position2) {
$("#element1").animate({left:'+=240em'}, 600);
}
else {
$("#element1").animate({left:'-=60em'}, 600);
}
});
});
如果您能给我一个答案或将我引导至另一篇文章,我将不胜感激。提前谢谢你。
编辑:我使用的样式如下:
.element2 {
position: relative;
width: 60em;
height: 40em;
bottom: 8em;
background: rgba(242, 210, 139, 0.6);
border-radius: 1.2em;
z-index: 1;
overflow: hidden;
#element1 {
position: absolute;
margin-left: 180em;
width: 60em;
height: 40em;
z-index: 1;
}
我应该在开头提到这一点:element1 在 element2 中:
<div class="element2">
<img id="element1" src="image/bg1.png" />
</div>
最佳答案
这会给你一个元素的当前位置:
$('#element').position().left;
如果您需要相对于文档的位置(而不是相对于父元素),您可以使用:
$('#element').offset().left;
您应该能够直接比较这些不同元素的返回值。下面是一些适用于我的示例代码,请注意不需要解析,因为它们总是返回像素值。
var pos = Math.max($(w).scrollTop(), 38),
top = $(ballon).position().top,
dist = Math.abs(pos-top),
time = dist > 1000 ? 2000 : dist / 0.15;
if (pos + $(w).height() >= pHeight) {
pos = pHeight - bHeight - gHeight;
$(ballon).animate({'top': pos}, time, 'easeInOutSine');
}
else if (dist > 150 || pos < 100) {
$(ballon).animate({'top': pos}, time, 'easeInOutBack');
}
关于javascript - 如何比较javascript中两个元素的位置,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/10459040/