如何检查一个div从一个位置过渡到另一个位置时是否与另一个div [英] How to check if one div overlapped another during transition from one position to another
本文介绍了如何检查一个div从一个位置过渡到另一个位置时是否与另一个div的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
$(document).ready(function() {
$( function() {
$('#executeButton').click(function() {
test();
});
function coords(dx, dy) {
var cx = document.getElementById('block').style.marginLeft;
var cy = document.getElementById('block').style.marginTop;
cx = parseInt(cx) + 40 * dx;
cy = parseInt(cy) + 40 * dy;
if (cx < 0) cx = 0;
if (cy < 0) cy = 0;
if (cx > 360) cx = 360;
if (cy > 360) cy = 360;
document.getElementById('block').style.marginLeft = cx + 'px';
document.getElementById('block').style.marginTop = cy + 'px';
}
function test(){
move(4);
setTimeout(move, 2000, 4);
placePostion();
setTimeout(move, 4000, 4);
placePostion();
setTimeout(move, 6000, 2);
placePostion();
setTimeout(move, 8000, 2);
placePostion();
}
function move(id) {
if (id == '1') {
coords('0','-1');
} else if (id == '2') {
coords('0','1');
} else if (id == '3') {
coords('-1','0');
} else if (id == '4') {
coords('1','0');
}
}
function placePostion() {
var block = $('#block').position();
var dest = $('#dest').position();
if (block.top == dest.top && block.left == dest.left) {
alert("reached");
}
}
});
});
#panel {
width: 100%;
height: 100%;
border-style: solid;
padding-top: 10px;
padding-right: 10px;
padding-bottom: 10px;
padding-left: 10px;
}
#game {
width: 400px;
height: 400px;
background-image: linear-gradient(transparent 39px, #888 39px, transparent 40px), linear-gradient(90deg, transparent 39px, #888 39px, transparent 40px);
background-size: 40px 40px, 40px 40px;
border-style: solid;
float: left;
margin-right: 10px;
}
#block {
width: 40px;
height: 40px;
float: left;
transition: 1s;
background-color: red;
outline: 1px solid;
}
#dest {
width: 40px;
height: 40px;
background-color: blue;
outline: 1px solid;
}
#character {
width: 50px;
height: 50px;
outline: 1px solid;
float: left;
background-color: red;
transition: 1s;
}
<html>
<head>
<link rel="stylesheet" href="movefunction.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.min.js"></script>
<script src="movecharacter.js"></script>
</head>
<body>
<button id="executeButton">Execute</button>
<div id="panel">
<div id="game">
<div id="block" style="margin-left: 40px; margin-top: 40px;">
</div>
<div id="dest" style="margin-left: 160px; margin-top: 120px;">
</div>
</div>
</div>
</body>
</html>
我已经添加了代码段.在这里，当红色方块到达蓝色方块时，它应该说是警报，而当前它的行为就像它们从一开始就处于相同的位置.它实际上应该移动，并且当它到达蓝色块时，只能说到达了.对于不同的最终位置，它不应显示任何内容.
I have added the snippet. Here when the red block reaches the blue block, it should say the alert whereas currently its behaving like they are having the same position from the start itself. It should actually move and when it reaches the blue block then only it should say reached. For different final position it should not display anything.
推荐答案
- 您还需要将
placePostion放在setTimeout内，否则将直接执行该操作，而不会获得正确的位置. - 您需要使用
offset而不是position. - 由于
block处于浮动状态，因此您也需要将高度添加到偏移量top.
- You need to put
placePostioninside thesetTimeouttoo, otherwise it will be executed directly and not get the correct positions. - You need to use
offsetinstead ofposition. - Because your
blockis floated you need to add the height to the offsettoptoo.
$(function() {
$(function() {
$('#executeButton').click(function() {
test();
});
function coords(dx, dy) {
var cx = document.getElementById('block').style.marginLeft;
var cy = document.getElementById('block').style.marginTop;
cx = parseInt(cx) + 40 * dx;
cy = parseInt(cy) + 40 * dy;
if (cx < 0) cx = 0;
if (cy < 0) cy = 0;
if (cx > 360) cx = 360;
if (cy > 360) cy = 360;
document.getElementById('block').style.marginLeft = cx + 'px';
document.getElementById('block').style.marginTop = cy + 'px';
}
function test() {
move(4);
placePostion();
setTimeout(function() {
move(4);
placePostion();
}, 2000);
setTimeout(function() {
move(4);
placePostion();
}, 4000);
setTimeout(function() {
move(2);
placePostion();
}, 6000);
setTimeout(function() {
move(2);
placePostion();
}, 8000);
}
function move(id) {
if (id == '1') {
coords('0', '-1');
} else if (id == '2') {
coords('0', '1');
} else if (id == '3') {
coords('-1', '0');
} else if (id == '4') {
coords('1', '0');
}
}
function placePostion() {
var block = $('#block').offset();
var dest = $('#dest').offset();
if (block.top + $('#block').height() == dest.top && block.left == dest.left) {
alert("reached");
}
}
});
});
#panel {
width: 100%;
height: 100%;
border-style: solid;
padding-top: 10px;
padding-right: 10px;
padding-bottom: 10px;
padding-left: 10px;
}
#game {
width: 400px;
height: 400px;
background-image: linear-gradient(transparent 39px, #888 39px, transparent 40px), linear-gradient(90deg, transparent 39px, #888 39px, transparent 40px);
background-size: 40px 40px, 40px 40px;
border-style: solid;
float: left;
margin-right: 10px;
}
#block {
width: 40px;
height: 40px;
float: left;
transition: 1s;
background-color: red;
outline: 1px solid;
}
#dest {
width: 40px;
height: 40px;
background-color: blue;
outline: 1px solid;
}
#character {
width: 50px;
height: 50px;
outline: 1px solid;
float: left;
background-color: red;
transition: 1s;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.min.js"></script>
<button id="executeButton">Execute</button>
<div id="panel">
<div id="game">
<div id="block" style="margin-left: 40px; margin-top: 40px;"></div>
<div id="dest" style="margin-left: 160px; margin-top: 120px;"></div>
</div>
</div>
这篇关于如何检查一个div从一个位置过渡到另一个位置时是否与另一个div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
