Keine Cache-Version

Caching deaktiviert Standardeinstellung für diese Seite:aktiviert (code LNG204)
Wenn die Anzeige zu langsam ist, können Sie den Benutzermodus deaktivieren, um die zwischengespeicherte Version anzuzeigen.

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

Inhaltsverzeichnis
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]

Deutsche Übersetzung

Sie haben gebeten, diese Seite auf Deutsch zu besuchen. Momentan ist nur die Oberfläche übersetzt, aber noch nicht der gesamte Inhalt.

Wenn Sie mir bei Übersetzungen helfen wollen, ist Ihr Beitrag willkommen. Alles, was Sie tun müssen, ist, sich auf der Website zu registrieren und mir eine Nachricht zu schicken, in der Sie gebeten werden, Sie der Gruppe der Übersetzer hinzuzufügen, die Ihnen die Möglichkeit gibt, die gewünschten Seiten zu übersetzen. Ein Link am Ende jeder übersetzten Seite zeigt an, dass Sie der Übersetzer sind und einen Link zu Ihrem Profil haben.

Vielen Dank im Voraus.

Dokument erstellt 13/09/2004, zuletzt geändert 26/10/2018
Quelle des gedruckten Dokuments:https://www.gaudry.be/de/ast-rf-385.html

Die Infobro ist eine persönliche Seite, deren Inhalt in meiner alleinigen Verantwortung liegt. Der Text ist unter der CreativeCommons-Lizenz (BY-NC-SA) verfügbar. Weitere Informationen auf die Nutzungsbedingungen und dem Autor.