Geen cache-versie.

Caching uitgeschakeld. Standaardinstelling voor deze pagina:ingeschakeld (code LNG204)
Als het scherm te langzaam is, kunt u de gebruikersmodus uitschakelen om de cacheversie te bekijken.

Vous devez être membre et vous identifier pour publier un article.
Les visiteurs peuvent toutefois commenter chaque article par une réponse.

Opérateurs booléens pour ajouter des conditionsEffacer le fichier GMAPPROM.IMG du pocket PC iQue.

Javascript - Comment faire défiler une image qui se répèt

Inhoudsopgave
Astuces de l’Infobrol (Développement)Article publié le 10/02/2007 10:57:24


Bonjour à toutes et à tous!


Aujourd'hui je vous propose un script qui vous permet de faire défiler une image qui se répète dans un élémént DOM d'une page HTML (par exemple: un DIV).

Vous pouvez règler la vitesse de défilement des images ainsi que le nombre de pixels dont elles sont déplacées à chaque mouvement.

Le script est documenté en anglais (sorry Steph ;-) ) mais je le posterai bientôt avec les commentaires en français.

Allez! Je vous laisse essayer! 

  1. ‹html›
  2. ‹head›
  3.   ‹title›Démo de frise d'image déroulantes - HackTrack 10/02/2007‹/title›
  4.   ‹script language="javascript" type="text/javascript"›
  5. 	/**
  6. 	*	AnimatedImage
  7. 	*
  8. 	*	Author: HackTrack (Philippe FERY - philippe.fery@gmail.com)
  9. 	*
  10. 	*	Date : 10/02/2007
  11. 	*
  12. 	*	Version 1.0
  13. 	*
  14. 	*	This script allows you to display a repeated image on the screen width, inside a DOM element.
  15. 	*	
  16. 	*	To use it, just call function 'startAnimation' with parameters (see function 'startAnimation')
  17. 	*
  18. 	*	TO DO: snap first and last image in order not to see horizontal scrollbar moving
  19. 	* */
  20.  
  21.  
  22. 	var animatedImage; 	// image to be animated
  23. 	var stepX;			// number of pixels to move image between each move
  24. 	var dx;				//temporary variable used to calculate the current image offset
  25. 	var delay;			//delay between two moves (in milliseconds)
  26. 	var imageWidth;		//the image width
  27. 	var imageHeight;	//the image height(not used at now)
  28. 	var width;			//window inner width
  29. 	var height;			//window inner height (not used at now)
  30. 	var domElement;		//the DOM element where images have to be displayed
  31. 	var innerDOMElement;//a temporary DIV element used to display images inside the domElement
  32.  
  33. 	/**
  34. 	*	Function :
  35. 	*		name: runAnimation
  36. 	*		description:  endless loops image animation
  37. 	*	Parameters: none
  38. 	*/
  39. 	function runAnimation(){
  40. 		dx+=stepX;
  41. 		dx=parseInt(dx%imageWidth);
  42. 		width = parseInt(domElement.style.width);
  43. 		height = domElement.offsetHeight;
  44. 		var imageCount = parseInt(width/imageWidth)+3;
  45. 		domElement.style.overflow="hidden";
  46. 		innerDOMElement.style.width=imageCount*imageWidth;
  47. 		if(innerDOMElement.children != null){
  48. 			while(innerDOMElement.children.length›0){
  49. 				var elm =innerDOMElement.children[0];
  50. 				innerDOMElement.removeChild(elm);
  51. 				elm=null;
  52. 			}
  53. 		}
  54. 		var tmpImage;
  55. 		for(i=0;  i‹imageCount ; i++){
  56. 			tmpImage = new Image();
  57. 			tmpImage.src=animatedImage.src;
  58. 			tmpImage.style.position="relative";
  59. 			tmpImage.style.top="0px";
  60. 			imageLeft=imageWidth*-1;
  61. 			tmpImage.style.left=imageLeft+"px";
  62. 			innerDOMElement.appendChild(tmpImage);
  63. 		}		
  64. 		innerDOMElement.style.position="relative";
  65. 		innerDOMElement.style.left=dx;
  66. 		setTimeout("runAnimation()",delay);
  67. 	}
  68.  
  69. 	/**
  70. 	*	Function :
  71. 	*		name: startAnimation
  72. 	*		description:  initializes animation then starts it
  73. 	*	Parameters:
  74. 	*		targetElementName: the DOM element where the images have to be displayed
  75. 	*		imageURL: image location
  76. 	*		step: the number of pixels the image will be moved each time (positive value=move right; neagtive value=move left)
  77. 	*		delayInMillis: the delay in milliseconds between each move
  78. 	*/
  79. 	function startAnimation(targetElementName, imageURL, step, delayInMillis){
  80. 		animatedImage= new Image();
  81. 		animatedImage.src=imageURL;
  82. 		imageWidth=animatedImage.width;
  83. 		imageHeight=animatedImage.height;
  84. 		domElement=document.getElementsByName(targetElementName)[0];
  85. 		stepX = step;
  86. 		delay = delayInMillis;
  87. 		dx=0;
  88. 		innerDOMElement=document.createElement('div');
  89. 		domElement.appendChild(innerDOMElement);
  90. 		runAnimation();
  91. 	}
  92.   ‹/script›
  93. ‹/head›
  94. ‹!--body onload="startAnimation('frise','file://F:/testBG_mini.jpg',-20,10);"--›
  95. ‹body onload="startAnimation('frise','file://F:/heartbeat.gif',-1,20);"›
  96. ‹p›Demo de défilement d'images - HackTrack 12/02/2007‹/p›
  97. ‹div id="frise" name="frise" style="border: solid 1px black;width:1024;"›
  98. ‹/div›
  99. <img src="https://www.gaudry.be/img/smiley/icon_cool.gif" alt=";-)" hspace="10" />
  100. HackTrack
  101.  
  102. &#139;/body&#155;
  103. &#139;/html&#155;


A bientôt pour une nouvelle astuce!

;-)
HackTrack

Avatar :: HackTrack Un article de HackTrackModifié 1 fois. (dernière modification le 10/02/2007 10:58:00 par HackTrack)



Source : indéterminée


Commenter l'article

Opérateurs booléens pour ajouter des conditionsEffacer le fichier GMAPPROM.IMG du pocket PC iQue.

Sélection, tri et recherche d'articles
FILTRER :
TRIER :1er critère : 2e critère :
CHERCHER : Dans les titres Dans le contenu


[Afficher les liens en fonction des critères du formulaire ci-dessus]

Nederlandse vertaling

U hebt gevraagd om deze site in het Nederlands te bezoeken. Voor nu wordt alleen de interface vertaald, maar nog niet alle inhoud.

Als je me wilt helpen met vertalingen, is je bijdrage welkom. Het enige dat u hoeft te doen, is u op de site registreren en mij een bericht sturen waarin u wordt gevraagd om u toe te voegen aan de groep vertalers, zodat u de gewenste pagina's kunt vertalen. Een link onderaan elke vertaalde pagina geeft aan dat u de vertaler bent en heeft een link naar uw profiel.

Bij voorbaat dank.

Document heeft de 13/09/2004 gemaakt, de laatste keer de 26/10/2018 gewijzigd
Bron van het afgedrukte document:https://www.gaudry.be/nl/ast-rf-385.html

De infobrol is een persoonlijke site waarvan de inhoud uitsluitend mijn verantwoordelijkheid is. De tekst is beschikbaar onder CreativeCommons-licentie (BY-NC-SA). Meer info op de gebruiksvoorwaarden en de auteur.