login  Naam:   Wachtwoord: 
Registreer je!
 Forum

Foto verwisselen, vloeiender?

Offline Esthergr - 22/12/2011 13:44 (laatste wijziging 22/12/2011 13:45)
Avatar van EsthergrLid Hoi allemaal,

Ik ben bezig geweest met het verspringen van beeld, het lukt, maar het gaat niet heel erg vloeiend.

Wie heeft er een idee hoe dit vloeiender kan?

Code:
javascript code - Bekijk de code zonder highlighting - Klap code in 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <SCRIPT LANGUAGE="JavaScript">
  5.  
  6. var interval = 2; // tijd tussen wisselen van de afbeeldingen (in seconden)
  7. var random_display = 0; // 0 = vaste volgorde, 1 = willekeurige volgorde
  8. interval *= 1000;
  9.  
  10. var image_index = 0;
  11. image_list = new Array();
  12. image_list[image_index++] = new imageItem("../../Public/Pictures/Sample Pictures/Koala.jpg");<!-- afb 1 -->
  13. image_list[image_index++] = new imageItem("../../Public/Pictures/Sample Pictures/Jellyfish.jpg");<!-- afb 2 -->
  14. image_list[image_index++] = new imageItem("../../Public/Pictures/Sample Pictures/Desert.jpg");<!-- afb 3 -->
  15. image_list[image_index++] = new imageItem("../../Public/Pictures/Sample Pictures/Lighthouse.jpg");<!-- afb 4 -->
  16. image_list[image_index++] = new imageItem("../../Public/Pictures/Sample Pictures/Hydrangeas.jpg");<!-- afb 5 -->
  17.                                                                    <!-- enz.. -->
  18. var number_of_image = image_list.length;
  19. function imageItem(image_location) {
  20. this.image_item = new Image();
  21. this.image_item.src = image_location;
  22. }
  23. function get_ImageItemLocation(imageObj) {
  24. return(imageObj.image_item.src)
  25. }
  26. function generate(x, y) {
  27. var range = y - x + 1;
  28. return Math.floor(Math.random() * range) + x;
  29. }
  30. function getNextImage() {
  31. if (random_display) {
  32. image_index = generate(0, number_of_image-1);
  33. }
  34. else {
  35. image_index = (image_index+1) % number_of_image;
  36. }
  37. var new_image = get_ImageItemLocation(image_list[image_index]);
  38. return(new_image);
  39. }
  40. function beeldwissel(place) {
  41. var new_image = getNextImage();
  42. document[place].src = new_image;
  43. var recur_call = "beeldwissel('"+place+"')";
  44. setTimeout(recur_call, interval);
  45. }
  46.  
  47. </script>	
  48.  
  49. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  50. <title>jQuery</title>
  51. </head>
  52.  
  53. <body>
  54.  
  55. <BODY OnLoad="beeldwissel('beeld')">
  56.  
  57. <img name="beeld" src="../../Public/Pictures/Sample Pictures/Koala.jpg" width=500 height=450; src="../../Public/Pictures/Sample Pictures/Jellyfish.jpg"; src="../../Public/Pictures/Sample Pictures/Desert.jpg"; src="../../Public/Pictures/Sample Pictures/Lighthouse.jpg"; src="../../Public/Pictures/Sample Pictures/Hydrangeas.jpg"/>
  58.  
  59.  
  60. </body>
  61. </html>


Alvast bedankt !

1 antwoord

Gesponsorde links
Offline WouterJ - 22/12/2011 16:12
Avatar van WouterJ HTML gevorderde Het language attribuut heeft nooit bestaan en is slechts een verzinsel geweest. Gebruik type="text/javascript" als attribuut, of zet er niks neer de default is text/javascript bij script tags.

HTML is altijd met kleine letters, dus niet <BODY> maar gewoon <body>. Verder moet er om de values bij HTML altijd gewoon quotes (attribute="value"), dit is niet meer verplicht maar als je het doet weet je dat er nooit meer iets mis kan gaan.
Op 1 image tag 4 src attributes? Dat gaat natuurlijk nooit meer werken. En de ; na height=450 staat er ook een beetje vreemd.

Het interval kleiner maken of de stapgrootte kleiner maken zorgt altijd voor een vloeiender beweging. In de animatiewereld houden ze als minimum norm 25 beeldjes per seconde, dit betekend dus 40 miliseconde als interval voor elk beeldje.
In de gamewereld gebruiken ze 60 beeldjes per seconde als norm voor een vloeiende beweging, dit komt dus neer op ong. 16,7 beeldjes per seconde.
Gesponsorde links
Je moet ingelogd zijn om een reactie te kunnen posten.
Actieve forumberichten
© 2002-2024 Sitemasters.be - Regels - Laadtijd: 0.18s