Hilfe
Neues Thema
Antworten
Iso sagte:
Das mit den offset klappt irgendwie nicht, wenn ich nämlich manuell die Höhe und Breite der box eintrage, funktioniert alles, beim offset fliegt das kleine Rechteck einfach unendlich weit nach unten rechts ...
Welcher Browser? Ich poste mal den Quelltext der bei mir rausgekommen ist:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>opdracht 2a</title>
<script type="text/javascript">
var x = 10;
var y = 10;
var height = 0;
var width = 0;
var xTempo = 5;
var yTempo = 5;
function init() {
height = getObj("box").offsetHeight;
width = getObj("box").offsetWidth;
startAnimation();
}
function startAnimation(){
setInterval("animate()",10);
}
function animate(){
if(x>=width){
xTempo = -5;
}
if(x<=0){
xTempo = 5;
}
if(y>=height){
yTempo = -5;
}
if(y<=0){
yTempo = 5;
}
x += xTempo;
y += yTempo;
shiftTo();
}
function shiftTo() {
getObj('rect').style.left = x + "px";
getObj('rect').style.top = y + "px";
}
function getObj(elementID){
return document.getElementById(elementID);
}
</script>
<style type="text/css">
#box { background: navy; height: 300px; width: 400px; z-index: 1; }
#rect { background: yellow; height: 20px; width: 20px; z-index: 2; position:relative; }
</style>
</head>
<body>
<div id="box">
<div id="rect"></div>
</div>
<a href="java script:init()">Start</a>
</body>
</html>
Nach oben
