javascript - Animation i JavaScript - Udvikleren.dk - Programmering, webdesign og grafik

Tags: javascript

<< < 1 2 3 > >>

Bruger #15540 @ 06.02.10 23:31

Jeg har kigget lidt rundt omkring om hvordan man får et billed til at bevæge sig fra a til b når siden loader og når man skifter side går billet fra b til a(hvis i forstår xD), men jeg kan ikke få det til at virke....

jeg fandt følgende, som jeg kunne ikke rigtigt få det til at virke... http://www.webreference.com/js/column18/slide.html
men det lyder som noget af det jeg skal bruge...

Sådan ser det ud, det jeg har... jeg har fjernet alt det der ikke har noget med det at gøre, så det er nemt at overskue

Kode

			<script type="text/javascript">

function slideBy(dx, dy, steps, interval, statement) {
  var fx = this.left();
  var fy = this.top();
  var tx = fx + dx;
  var ty = fy + dy;
  this.slideTo(tx, ty, steps, interval, statement);
}

function slideTo(tx, ty, steps, interval, statement) {
  var fx = this.left();
  var fy = this.top();
  var dx = tx - fx;
  var dy = ty - fy;
  var sx = dx / steps;
  var sy = dy / steps;

  var ar = new Array();
  for (var i = 0; i < steps; i++) {
    fx += sx;
    fy += sy;
    ar[i] = new pos(fx, fy);
  }
  this.path = ar;

  this.statement = (statement) ? statement : null;
  this.animate(interval);
}

			</script>
<img src="bund.png"  onload="slideTo('220','500','100','50','alert('done')')" onload="slideBy('220','300','100','50','alert('done')')">

er der nogen der kan hjælpe, jeg er gerne åbne for andre løsninger

23 svar postet i denne tråd vises herunder
3 indlæg har modtaget i alt 4 karma

Sorter efter stemmer Sorter efter dato

Bruger #5620 @ 11.02.10 19:50

1.500

Kode

<!DOCTYPE html>
<html>
<head>
  <style type="text/css">
#bund { 
position:absolute; 

}
</style>

</head>
<body>
<img src="fil.png" id="bund">

<script type="text/javascript">
var bund = null;


function doMove(setup) {
  setup.at=0;
  setup.element.style.top="0px";
  var func=function(){
        setup.at+=1
	bund.style.top = setup.at+'px';
        if(setup.moveTo==setup.at){
           clearInterval(setup.interval);
           setup.onComplete();
        }
        var me=this;
  }
  setup.interval=setInterval(func,20);
}


function callback(){
  alert('t');
}


function init() {
  bund = document.getElementById('bund');
  bund.style.top = '0px';
  doMove({
    element:bund
    ,moveTo:200
    ,onComplete:callback 
  });
}

window.onload =
 init;
</script>
</body>
</html>

Bruger #11328 @ 10.02.10 22:25

1.323

Nu siger du at du ikke vil bruge jquery til en animation - jeg er gået over til KUN at bruge jquery til alt det jeg normalt bruger "almindeligt" javascript til, da du kan skrive enormt stærke funktioner der virker i alle browsere, og du let kan hente plugins til alt muligt.

Med den kode du skriver der, skal du prøve at sætte en parantes udenom det du plusser sammen, således:
bund.style.top = (parseInt(bund.style.top)+1)+'px';

Ved ikke hovr meget det har at sige..

Problemet er så at du hurtigt bliver afhængig af så mange foruddefinere funktioner.
Og hvis du selv laver et produkt, som et framework, library, whatever, bliver mange gange så stort pga. hele jQuery filen der skal loades.
Hvis man absolut skal bruge et JS framework, foreslår og foretrækker jeg PrototypeJS. PrototypeJS er det klart, reneste, pæneste og mest elegante JS framework til dato.

Bruger #8773 @ 10.02.10 22:33

658

Nu siger du at du ikke vil bruge jquery til en animation - jeg er gået over til KUN at bruge jquery til alt det jeg normalt bruger "almindeligt" javascript til, da du kan skrive enormt stærke funktioner der virker i alle browsere, og du let kan hente plugins til alt muligt.

Med den kode du skriver der, skal du prøve at sætte en parantes udenom det du plusser sammen, således:
bund.style.top = (parseInt(bund.style.top)+1)+'px';

Ved ikke hovr meget det har at sige..

Problemet er så at du hurtigt bliver afhængig af så mange foruddefinere funktioner.
Og hvis du selv laver et produkt, som et framework, library, whatever, bliver mange gange så stort pga. hele jQuery filen der skal loades.
Hvis man absolut skal bruge et JS framework, foreslår og foretrækker jeg PrototypeJS. PrototypeJS er det klart, reneste, pæneste og mest elegante JS framework til dato.

Vi har været inde og kigge på loadtider på to versioner af vores site - et hvor alle funktioner er skrevet i "ren" javascript, og en hvor alt er skrevet i jquery (selvfølgeligt minimized versionen) og jquery var langt hurtigere, og gav oven i købet bedre browser support. Det er rigtigt at det er en fandens stor fil hvis den ikke er compresed, men det ville jo også være dumt at lade være

Bruger #8773 @ 07.02.10 00:34

658

woow, ser noget besværligt ud..

Jeg vil anbefale at du kigger på jquery's animate() funktion.

Hvis du tager et kig på http://www.jquery.com og http://docs.jquery.com og henter jquery pakken og så læser lidt i dokumentationen om animate funktionen, tror jeg hurtigt du kan få lavet noget

- det er utroligt simpelt at have med at gøre.

Før skrev jeg i javascript hvilket ofte var flere hundrede linjer - nu kan jeg skrive de samme funktioner på under det halve plads og så er der større support i alle browsere

Bruger #15540 @ 07.02.10 22:13

Hmm jeg prøvede at følge en tutorials, men den virkede ikke når jeg brugte den på et billed. hvordan skal man skrive det for det virker med et billed?

Kode

<!DOCTYPE html>
<html>
<head>
  <style>
div { 
position:absolute; 
background-color:#abc; 
left:50px;
width:90px; 
height:90px;
margin:5px; 
}
</style>
  <script src="jquery-1.4.js"></script>
</head>
<body>
	<button id="Up">Up</button> <button id="Down">Down</button>
<div class="block"></div>

<script>
$("#Down").click(function(){
  $(".block").animate({"top": "+=500px"}, "slow");
});

$("#Up").click(function(){
  $(".block").animate({"top": "-=500px"}, "slow");
});

</script>
</body>
</html>

Bruger #8773 @ 07.02.10 22:27

658

top er måske ikke en smart property at starte med, hvis du vil være sikker på at det virker.

Tag at starte med height eller width..

Desuden ser det ud som om at du mangler lidt jquery kode (den del hvor DOM er loaded).

$(document).ready(function(){
// Al jquery kode her
});

Bruger #15540 @ 08.02.10 10:27

hhmmmm jeg skal vel bruge top, fordi jeg vil ha et element til at gå fra a til b lodret. Height og width ændre vel bare på størrelsen af elementet.. og det er ikke det jeg vil...

jeg forstår ikke helt hvad du mener med at jeg mangler noget jquery kode, eftersom jeg kopieret et eksempel og kun ændret på hvilken retning den skal gå i og hvor langt den skal gå...

Bruger #8773 @ 08.02.10 12:03

658

du skal bruge height og width for lige at prøve om det virker.. Det er lettere at se, og det virker uanset doctype osv..

det jeg mente med at du manglede noget var, at i din script tag skal du starte med denne kode:

<script type="text/javascript">
$(document).ready(function(){
// Al jquery kode her
});
</script>

Der hvor der står al jquery kode her, skal du indsætte din egen kode..

Bruger #15540 @ 08.02.10 14:44

Når okay .... jeg prøvede med height and width og det virkede udmærket, men top virker jo ikke... er der nogen anden proberty jeg kan bruge?

Var det sådan her du mente:

Kode

<!DOCTYPE html>
<html>
<head>
  <style>
div { 
position:absolute; 
background-color:#abc; 
left:50px;
width:90px; 
height:90px;
margin:5px; 
}
</style>
 <script src="http://code.jquery.com/jquery-latest.js"></script>

</head>
<body>
	<button id="Up">Up</button> <button id="Down">Down</button>
<div class="block" ></div>

<script type="text/javascript">
$(document).ready(function(){
$("#Down").click(function(){
  $(".block").animate({"top": "+=500px"}, "slow");
});

$("#Up").click(function(){
  $(".block").animate({"top": "-=500px"}, "slow");
});
});
</script>
</body>
</html>

Bruger #8773 @ 08.02.10 14:54

658

Top kræver at elementet er position:absolute i css.. og så kan det godt have noget med doctype at gøre, men burde det ikke..

Prøv i din CSS at angive position:absolute på din boks og se om det virker

<< < 1 2 3 > >>

Animation i JavaScript

Karma barometer (30 dage)

Modtaget

Givet

Favorit hos
Forum tråde
Artikler