Beste,
Ik ben nog steeds bezig met m'n landkaart, alleen ik doe het nu in JQuery.
Dit is wat ik nu heb:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="nl" xml:lang="nl">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Animatie in JavaScript</title>
<!-- <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script> -->
<style type="text/css">
<!--
#map
{
background: #95EDDC url('http://planemania.nl/nl1/images/kaart.gif');
height: 340px;
position: relative;
width: 450px;
}
#plane
{
background: url('http://planemania.nl/nl1/images/planeicon_16.gif');
height: 16px;
position: absolute;
width: 16px;
}
-->
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript">
//<![CDATA[
$( function() {
$( '#plane' ).css( { left: 200, top: 88 } );
$( '#plane' ).animate(
{ left: 238, top: 118 },
5000,
'linear'
);
});
//]]>
</script>
</head>
<body>
<div id="map">
<div id="plane"></div>
</div>
</body>
</html>
Toon Meer
Voorbeeld: http://planemania.nl/animatie.php
Alleen de volgende dingen moet ik nog toevoegen:
1) Een lijn trekken tussen die punten;
2) Het vliegtuigje moet nog wat draaien (iets van 45 graden ofzo)
3) Nu word elke keer als je de pagina vernieuwd de animatie afgespeelt, maar ik wil straks als ik het in de PHP integreer, graag dat ie zegmaar begint waar hij op dat moment echt is.
Hiermee bedoel ik dus:
Dat ik een tijd heb opgeslagen in de DB, en de tijd hoe lang het duurt, en dat ie uitrekent waar hij dan moet beginnen.
Ook weet ik het aantal km.
Voorbeeld:
Amsterdam - Antalya, begint om 18:00.
De reis duurt 4 uur.
Als je het op 19:00 zal bekijken, dan is die dus op 1 kwart, van de vlucht Amsterdam - Antalya.
Ik hoop dat iemand me kan helpen,
Lars