Geneste weergave | Lineaire weergave

yasmin__ · 20-07-2008 18:02:21

Nou probeerde ik uit mijn hoofd een bewegend object te maken
aan de hand van een ander voorbeeld.. ik begreep de code van dat voorbeeld
wel maar als test wilde ik kijken of ik zoiets ook uit mijn hoofd
kon maken....
Ik wilde zo een effect als:

http://www.xs4all.nl/~vdnet/dom_animatie2.html

Maar nu doet mijn code het niet dus weet iemand misschien wat er fout is?

Citaat:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title></title>
<style type="text/css">

#object {
border: 4px solid #000;
}
</style>
<script type="text/javascript">
function bewegen() // beweeg functie
{
var objec= document.getElementById("object");
var x= parseInt(objec.style.left);
var y= parseInt(objec.style.top);
var boven= 0;
var onder= 300;
var rechts= 300;
var links= 0;
var snelx= 2;
var snely= 2;

if(x < links || x >= rechts)
{
snelx = snelx * -2;
}
if(y < boven || y > onder)
{
snely = snely* -2;
}

document.getElementById("object").style.left= x+ snelx + "px";
document.getElementById("object").style.top= y+ snely + "px";

setTimeout('bewegen()',10); // roept zichzelf aan om het bewegen te kunnen voortsetten
}
</script>
</head>

<body onload="bewegen()">
<p id="object">object</p>

</body>
</html>

Anjo · 20-07-2008 18:07:03

Wat wil je precies? Want als ik die link open, beweegt het blokje gewoon...

EDIT: Ah, dat was juist je voorbeeld, logisch dat die het doet dan

Kun je misschien je eigen code ergens online gooien, is makkelijker kijken

Emmos · 20-07-2008 18:31:26

Anjo schreef:Kun je misschien je eigen code ergens online gooien, is makkelijker kijken

Is de code niet gewoon haar eigen code en het voorbeeld, datgene wat ze als resultaat wilt krijgen?

Anjo · 20-07-2008 18:47:16

Denk het wel ja, maar als code online staat, kan je mooi zien waar het mis gaat

En zit hier nu op pc die niet zo van lokaal draaien houdt+ik ben lui

yasmin__ · 20-07-2008 19:14:33

Anjo schreef:Denk het wel ja, maar als code online staat, kan je mooi zien waar het mis gaat En zit hier nu op pc die niet zo van lokaal draaien houdt+ik ben lui

is niet mijn code hoor....die online staat.
De code hierboven is enkel het op mijn manier gemaakte object dat niet werkt..
Dus ik wilde graag weten wat er fout was aan de code die ik uit mijn hoofd
probeerde te maken, want ikzelf heb 3 uur lang zitten testen maar kwam er niet uit..
heb er tenslotte al mijn hele dag aan besteed..

Ikke · 20-07-2008 20:07:11

Wat werkt er precies niet?

Matthijn · 20-07-2008 20:28:15

Jquery! misschien ietwat overkill, maar geloof me, straks wil je niet meer anders!
http://www.jquery.com, een framework voor vanalles en nogwat, en ook animeren

Onder andere is de Animatie functie iets wat je waarschijnlijk nodig zult hebben, http://docs.jquery.com/Effects/animate#p...ngcallback

Het lijkt misschien wat onlogisch, maar als je bij het begin begint bij jQuery, wijst het zich in no time vanzelf

MichielV · 21-07-2008 10:45:20

Jquery is overroepen

Echt overkill voor zoiets vind ik.

En werkt het als je in je css bij # object position: absolute zet?

Matthijn · 21-07-2008 10:56:41

MichielV schreef:Jquery is overroepen Echt overkill voor zoiets vind ik.

En werkt het als je in je css bij # object position: absolute zet?

Voor jezelf 10 regels code met een ontwikkeltijd van 5 minuten met jQuery, en anders 100 regels code met een ontwikkeltijd van 45 minuten, hmmm

Daarnaast is jQuery laten we zeggen 60kb, een beetje JPG plaatje stormt daar al gauw overheen.

Cuve · 21-07-2008 12:58:51

Matthijn schreef:, een beetje JPG plaatje stormt daar al gauw overheen.

Nou nou

Aries-Belgium · 21-07-2008 14:58:44

Matthijn schreef:Daarnaast is jQuery laten we zeggen 60kb

13kb

de minified versie is 13kb

OkÃ©, back on topic.

EÃ©n van de problemen is inderdaad dat het absoluut moet gepositioneerd zijn. Maar dan zal het nog niet werken. yasmin__ leest het style attribuut van het element uit maar die is helemaal niet geset. Ik denk dat ze best de offsetTop en de offsetLeft uitleest om de exacte positie te kennen van het object en daarop verder gaan. Bij die veranderingen gaat het al werken alleen blijft gaat hij niet verder gaan dan 300px omdat ze telkens de snelheid gaat resetten naar 2 en dan gaat checken of de positie van het object niet uit het opgegeven vlak komt en dan de snelheid negatief maken (eigenlijk verdubbelen en negatief maken in bovenstaande code) maar hij onthoudt het niet dus hij gaat maar wat liggen botsen in die hoek. Je moet dus de snelheid telkens meegeven met de functie. Dit is een aangepaste versie van bovenstaande code om het werkende te krijgen:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>

<head>

<title></title>

<style type="text/css">

#object {

border: 4px solid #000;

position:absolute;

}

</style>

<script type="text/javascript">

function bewegen(snelx,snely) // beweeg functie

{

var objec= document.getElementById("object");

var x= parseInt(objec.offsetLeft);

var y= parseInt(objec.offsetTop);

var boven= 0;

var onder= 300;

var rechts= 300;

var links= 0;

if(x <= links || x >= rechts)

{

snelx *=  -1;

}

if(y <= boven || y >= onder)

{

snely *=  -1;

}

document.getElementById("object").style.left= x + snelx + "px";

document.getElementById("object").style.top= y + snely + "px";

setTimeout(function(){ bewegen(snelx,snely)},10); // roept zichzelf aan om het bewegen te kunnen voortsetten

}

</script>

</head>

<body onload="bewegen(2,1)">

<span id="object">object</span>

</body>

</html>

Matthijn · 21-07-2008 15:59:37

Cuve schreef:
Matthijn schreef:, een beetje JPG plaatje stormt daar al gauw overheen.
Nou nou

Dat is alleen maar om aan te geven dat het framework het gebruik 10x versimpeld, en het enige argument wat meestal wordt gegeven is de grootte, maar dat merkt niemand meer, het is binnen no time binnen, en daarna wordt het gecached

Aries-Belgium · 21-07-2008 16:16:23

Offtopic

Geneste weergave \| Lineaire weergave Mijn bewegende object doet niet wat ik wil..
Auteur	Bericht