5 svar · 407 visningar · startad av Andy
Har ett knivigt matematiskt problem. Vill med javascript kolla om två olika divar ligger över varandra, dvs om något av lagren överlappar den andra diven.
Säg att jag har en div som har följande värden:
top: 100px;
left: 100px;
width: 300px;
height: 200px;
Och en annan div med dessa värden:
top: 150px;
left: 150px;
width: 300px;
height: 200px;
Hur kontrollerar jag om något av dessa lager överlappar det andra?
Jag kan inte mycket JavaScript men någonting i denna stilen hade jag gjort:
Ta reda på ett av de två lagernas fyra hörnpunkter. T.ex:
x : 20 - 78
y : 20 - 100
Kolla därefter de fyra hörnpunkterna, i tur och ordning, för det andra lagret.
Är värdet för x mellan 20 och 78?
I så fall; är värdet för y mellan 20 och 100?
I så fall: Bingo (eller kanske inte ;) )
Annars fortsätter du med nästa punkt, och sedan nästa och sedan nästa.
:bire
Gjorde en lösning som ser ut som nedan. Frågan är om den är bra. Den känns onödigt krånglig...
Anledningen till att jag har de två if-satserna är att man skall kunna välja om det första lagret skall vara det första eller andra argumentet som skickas till funktionen. Och vice versa.
<html>
<head>
<title></title>
<style>
#box1 {
position: absolute;
top: 20px;
left: 200px;
width: 300px;
height: 200px;
background-color: #000;
}
#box2 {
position: absolute;
top: 150px;
left: 300px;
width: 500px;
height: 300px;
background-color: #999;
}
</style>
<script>
function overlap(elm1,elm2) {
var first = document.getElementById(elm1);
var second = document.getElementById(elm2);
var objFirst = { x: parseInt(first.currentStyle.left), y: parseInt(first.currentStyle.top), width: parseInt(first.currentStyle.width), height: parseInt(first.offsetHeight) }
var objSecond = { x: parseInt(second.currentStyle.left), y: parseInt(second.currentStyle.top), width: parseInt(second.currentStyle.width), height: parseInt(second.offsetHeight) }
if (objFirst.x < objSecond.x) {
xOverlap = (objFirst.x + objFirst.width > objSecond.x) ? true: false;
} else {
xOverlap = (objSecond.x + objSecond.width > objFirst.x) ? true: false;
}
if (objFirst.y < objSecond.y) {
yOverlap = (objFirst.y + objFirst.height > objSecond.y) ? true: false;
} else {
yOverlap = (objSecond.y + objSecond.height > objFirst.y) ? true: false;
}
return (xOverlap && yOverlap) ? true: false;
}
</script>
</head>
<body onload="alert(overlap('box2','box1'))">
<div id="box1"></div>
<div id="box2"></div>
</body>
</html>
hur gör jag om jag vill att en function startar om ett lager är över ett annat?
Det finns inget event för detta utan det får du antingen kolla via en timeout-loop;
function checkcollision(){
if(overlap('box2','box1'){
// gör något här...
}
}
setInterval("checkcollision();",100);
Kommer alltså attkolla 10 ggr/sek om lagren ligger på varandra. Eller så får du kolla varje gång ett lager flyttas (via scriptet som sköter det) om lagren kolliderat.
Okey tack!