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 #15540 @ 08.02.10 17:56

Sweet det virkede

, nu er det så bare at lave så comandoen sker når jeg åbner siden...og når jeg skifter side. hvad skal jeg så skrive for at den går ned når jeg åbner siden?, er det ikke noget med win.onload.. er lidt usikker på hvordan jeg skal skrive det...

Kode

<!DOCTYPE html>
<html>
<head>
  <style>
#bund { 
position:absolute; 

}
</style>
<script src="http://code.jquery.com/jquery-latest.js">
</script>

</head>
<body>
	<button id="Up">Up</button> <button id="Down">Down</button>
<img src="bund.png" id="bund">

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

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

Bruger #8773 @ 08.02.10 18:29

658

Nej.

Når du arbejder med jquery, og du smider det inde i den der

$(document).ready(function(){

});

funktion, sker alt der inde når du loader siden, så du skal faktisk bare fjerne click eventet, så det bliver noget i den stil her:

JScript kode

 $(document).ready(function(){
   var showFor = 5000; //Vises i 5 sekunder (5000 milisekunder)
   $("#bund").animate({"top": "+=500px"}, "slow"));
   something = setTimeout("doSlideUp",showFor);
 
   doSlideUp = function(){
     $("#bund").animate({"top": "-=500px"}, "slow"));
   }
 });

Denne kode gør at den slider ned, vises i 5 sekunder og slider op igen

du kan ændre tiden ved showFor variablen

Har ikke testet det, men burde virke

Bruger #15540 @ 10.02.10 19:47

Sorry jeg ikke har skrevet tilbage skulle forberede eksamen

Hmmm jeg ville helst gerne skive alle koderne selv så jeg kunne bruge det i praksis, så jeg vil nok helst undgå jquery når det kun er til en animation at det skal bruges, håber du forstår

Jeg prøvede dog dit eksempel, men det virkede ikke...

Jeg fandt en af mine tidligere forsøg på at lave animationen, som faktisk gik okay.. ser sådan her ud...

Kode

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

}
</style>

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

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

function doMove() {
  bund.style.top = parseInt(bund.style.top)+1+'px';
  setTimeout(doMove,20);
}

function init() {
  bund = document.getElementById('bund');
  bund.style.top = '0px';
  doMove();
}

window.onload = init;

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

jeg skal bare har lavet så det stopper og ikke kører videre, er det noget der kan laves og laves simpelt ?

Bruger #8773 @ 10.02.10 22:03

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..

Bruger #11328 @ 10.02.10 22:48

1.323

Nu skal vi lige have noget på det rene.
jQuery, er en samling funktioner og objekter skrevet i det du kalder "ren" JavaScript. Af deres funktioner er hurtigere tyder jo bare på at i er dårlige til at optimere jeres kode.
Det du får i jQuery, er et væld af overflødige funktioner, og en masse funktioner der ikke er optimeret nok, på baggrund af at det er sådan et stort framework.

Bruger #15540 @ 11.02.10 08:29

Hey guys xD Jeg vil meget gerne skrive det selv, og jeg er sikker på at det kan skrives i javascript uden nogen ekstren jquery kode eller ligene, det er bare spørgsmålet om hvordan..

som sagt ser det pt sådan her ud:

Kode

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

}
</style>

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

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

function doMove() {
  bund.style.top = parseInt(bund.style.top)+1+'px';
  setTimeout(doMove,20);
}

function init() {
  bund = document.getElementById('bund');
  bund.style.top = '0px';
  doMove();
}

window.onload = init;

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

og det hjælper ikke at sætte parantes uden omkring plusserne. Men hvordan kan jeg skrive det så den bevæger sig fra et punkt til et andet...

Bruger #5620 @ 11.02.10 10:29

1.500

Kode

destination=0;
function doMove() {
  var at=parseInt(bund.style.top)+1;
  bund.style.top =at +'px';
  if(at!=destination){
    setTimeout(doMove,20);
  }
}
function init(){
  bund = document.getElementById('bund');
  bund.style.top = '0px';
  destination=200;
  doMove();
}

eller

Kode

destination=0;
animater=null;
function doMove() {
  var at=parseInt(bund.style.top)+1;
  bund.style.top =at +'px';
  if(at!=destination){
    clearInterval(animater);
  }
}
function init(){
  bund = document.getElementById('bund');
  bund.style.top = '0px';
  destination=200;
  animater=setInterval(doMove,20)
}

Indlæg senest redigeret d. 11.02.2010 10:31 af Bruger #5620

Bruger #15540 @ 11.02.10 11:21

Super, det virkede perfekt!
Mange tak, nu mangler jeg bare at gøre at når man kliker på linket laver den en animation og derefter skifter side... jeg er selv igang med at finde udaf hvordan jeg kan gøre det man i er det mere end velkommende til at komme med forslag

Bruger #11328 @ 11.02.10 12:17

1.323

EDIT: Må have været træt, være slam-kode har jeg aldrig produceret...

Indlæg senest redigeret d. 11.02.2010 12:20 af Bruger #11328

Bruger #15540 @ 11.02.10 12:48

men tak for forsøgt

<< < 1 2 3 > >>

Animation i JavaScript

Karma barometer (30 dage)

Modtaget

Givet

Favorit hos
Forum tråde
Artikler