Discussion :

[sooprano]

bjr j'ai terminer la maquette de mon site perso (width=3345px; height=768px) et qui est de sorte d'une design intérieur d'une agence comme vous voyer ma maquette et plus large 3345 px en hauteur, alors je veux défiler ou naviguer horizontalement a partir du curseur cet effet existe en flash mais je veux le faire en jquery es ce qu'il y a un effet qui répond a mon besoin merci

http://www.webdesignerwall.com/demo/...=490&width=720

ce lien montre ce que je veux exactement merci

[scourjean]

Peut-être que l'un de ces deux là te conviendra, mais sinon c'est pas terrible ce qu'on trouve sur le net pour ce genre d'effet.

http://webdev.stephband.info/parallax.html

ou

http://www.shinyface.com/projects/parallax/

[sooprano]

Peut-être que l'un de ces deux là te conviendra, mais sinon c'est pas terrible ce qu'on trouve sur le net pour ce genre d'effet.

http://webdev.stephband.info/parallax.html

ou

http://www.shinyface.com/projects/parallax/

le premier lien ne marche pas, le deuxiem oui c'est presque ce que je veux faire, juste que le deuxième exemple montre défilement verticalement et horizontalement
et moi je veux que defilement horizontalement ainsi ce dernier dois etre souple j'en sais pas quoi faire voici le js de cet exemple

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
jQuery(document).ready(function($){
	$('#Parallax').mousemove(
		function(e){
			/* Work out mouse position */
			var offset = $(this).offset();
			var xPos = e.pageX - offset.left;
			var yPos = e.pageY - offset.top;
 
			/* Get percentage positions */
			var mouseXPercent = Math.round(xPos / $(this).width() * 100);
			var mouseYPercent = Math.round(yPos / $(this).height() * 100);
 
			/* Position Each Layer */
			$(this).children('img').each(
				function(){
					var diffX = $('#Parallax').width() - $(this).width();
					var diffY = $('#Parallax').height() - $(this).height();
 
					var myX = diffX * (mouseXPercent / 100); //) / 100) / 2;
 
 
					var myY = diffY * (mouseYPercent / 100);
 
 
					var cssObj = {
						'left': myX + 'px',
						'top': myY + 'px'
					}
					//$(this).css(cssObj);
					$(this).animate({left: myX, top: myY},{duration: 50, queue: false, easing: 'linear'});
 
				}
			);
 
		}
	);
});

[scourjean]

A la place de :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

$(this).animate({left: myX, top: myY},{duration: 50, queue: false, easing: 'linear'});

Essaye ceci :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

$(this).animate({left: myX},{duration: 50, queue: false, easing: 'linear'});

[ABCIWEB]

Une alternative sans jquery mais en javascript :

Si le fonctionnement de cet exemple te convient il te sera facile de l'adapter pour faire défiler ton image. Onmouseover sur l'image ça stop le défilement, et le bouton en bas du cadre inverse le sens de défilement (si défilement en cours). Tu as même un module pour tester directement sur le lien qui figure dans cet exemple.

[sooprano]

[quote=ABCIWEB;5584345]Une alternative sans jquery mais en javascript :

Si le fonctionnement de cet exemple te convient il te sera facile de l'adapter pour faire défiler ton image. Onmouseover sur l'image ça stop le défilement, et le bouton en bas du cadre inverse le sens de défilement (si défilement en cours). Tu as même un module pour tester directement sur le lien qui figure dans cet exemple.

salut, oui c'est presque ça, mais je veux configurer navigation droite ou gauche ça dépend mouvement du souris comme a cet exemple http://www.webdesignerwall.com/tutor...allax-gallery/

ou cet exemple

http://www.fatboy.fr/products/

c'est possible de realiser cet effet qui est en flash en jquery ?

[sooprano]

Une alternative sans jquery mais en javascript :

Si le fonctionnement de cet exemple te convient il te sera facile de l'adapter pour faire défiler ton image. Onmouseover sur l'image ça stop le défilement, et le bouton en bas du cadre inverse le sens de défilement (si défilement en cours). Tu as même un module pour tester directement sur le lien qui figure dans cet exemple.

j'arrive a adapter l'exemple que tu m'as donnée a mon besoin mais le probleme c'est que le defilement se fait automatiquement moi je veux au moment ou je change l'emplacement de souris, je dois calculer le x de mouse avec javascript mais comment en faire ?

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
 
<script type="text/javascript" src="js/fonction.js"></script>
<style type="text/css">
#contente{/*width:1348px;*/ width: auto; height:100%; position:absolute; top:0 ;  overflow: hidden;}
</style>
<div id="contente">
<div id="images_defilant"  onmouseover = "DF_ObjetNavigMous('images_defilant','over')"  onmouseout = "DF_ObjetNavigMous('images_defilant','out')">
<img src="images/accueil.jpg" width="3345" height="768" title="Bimbo 1" alt="Bimbo 1" style = "margin-left:-344px" />
 
</div>
</div>

fonction.js

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
 
// JavaScript Document
 
 
function DF_ObjetDefilant(id,larg_d,mode,sens,vit,pos,b_esp,pause)
{
 
	this.DF_ObjetParam = typeof this.DF_ObjetParam == 'undefined' ? new Array() : this.DF_ObjetParam;	
	this.DF_ObjetParam[id] = typeof this.DF_ObjetParam[id] == 'undefined' ? new Array() : this.DF_ObjetParam[id];	
 
	if(typeof this.DF_ObjetParam[id]['id_defile'] == 'undefined') Set_param (id,larg_d,mode,sens,vit,pos,b_esp,pause);
 
	if (this.DF_ObjetParam[id]['largeur_def'] > 0 && this.DF_ObjetParam[id]['largeur_cadre'] > 0)
	{
		if (this.DF_ObjetParam[id]['mode'] == 'r') Boucle_ar(id); else Boucle_cont(id);
 
		this.DF_ObjetParam[id]['Timer'] = setTimeout(function(){DF_ObjetDefilant(id)},this.DF_ObjetParam[id]['delaicrnt']);	
	}
 
 
 
 
	function Set_param (id,larg_d,mode,sens,vit,pos,b_esp,pause) 
	{
 
	var id_d = null;
	var id_c = null;
 
	if(!(id_d = document.getElementById(id)))  id_d = null; else if(!(id_c = document.getElementById(id_d.parentNode.id))) id_c = null;
 
 
	if(id_c != null && id_d != null && id_d.hasChildNodes())
 
		{
			id_c.style.position = "relative";
 
			id_c.style.overflow = "hidden";
 
 
			id_d.style.position = "absolute";
 
			id_d.width = "auto";
 
 
			this.DF_ObjetParam[id]['largeur_def'] = id_d.offsetWidth;
 
			var div_defile = id_d.cloneNode(true);	
 
			var nb_noeud = id_c.childNodes.length;
 
			for (var i = 0; i < nb_noeud ; i++) id_c.removeChild(id_c.firstChild);
 
 
			var largeur_cadre = document.createElement("div");
 
			id_c.appendChild(largeur_cadre);	
 
			this.DF_ObjetParam[id]['largeur_cadre'] = largeur_cadre.offsetWidth;
 
			id_c.removeChild(id_c.firstChild);
 
 
			id_c.appendChild(div_defile);
 
 
			this.DF_ObjetParam[id]['id_defile'] = 	document.getElementById(id);
 
 
			this.DF_ObjetParam[id]['largeur_def'] = larg_d == 'auto' ? this.DF_ObjetParam[id]['largeur_def'] : parseInt(larg_d);
 
			this.DF_ObjetParam[id]['id_defile'].style.width = this.DF_ObjetParam[id]['largeur_def']+'px';			
 
			this.DF_ObjetParam[id]['mode'] = typeof mode != 'undefined' && (mode == 'r' || mode == 'b') ? mode : 'b';
 
			this.DF_ObjetParam[id]['sens_ini'] = typeof sens != 'undefined' && (sens == 'g' || sens == 'd') ? sens : 'g';
 
			this.DF_ObjetParam[id]['vitesse'] = typeof vit != 'undefined' && parseInt(vit) > 0 ? parseInt(vit) : 20;
 
			this.DF_ObjetParam[id]['psinit'] = typeof pos != 'undefined' && parseFloat(pos) > 0 ? parseFloat(pos) : 0;
 
			this.DF_ObjetParam[id]['b_esp'] = typeof b_esp != 'undefined' && parseFloat(b_esp) > 0 ? parseFloat(b_esp) : 0;		
 
			this.DF_ObjetParam[id]['pause'] = typeof pause != 'undefined' && parseInt(pause) > 0 ? parseInt(pause) : 0;
 
 
 
			this.DF_ObjetParam[id]['b_esp'] = this.DF_ObjetParam[id]['b_esp'] < 0  || this.DF_ObjetParam[id]['b_esp'] > 100 ? 0 : Math.ceil(this.DF_ObjetParam[id]['b_esp'] * this.DF_ObjetParam[id]['largeur_cadre']/100);
 
 
			this.DF_ObjetParam[id]['psinit'] = this.DF_ObjetParam[id]['psinit'] == 100 || this.DF_ObjetParam[id]['psinit'] < 0 || this.DF_ObjetParam[id]['psinit'] > 100 ? this.DF_ObjetParam[id]['largeur_cadre'] : Math.ceil(this.DF_ObjetParam[id]['psinit']*this.DF_ObjetParam[id]['largeur_cadre']/100);		
 
			this.DF_ObjetParam[id]['psinit'] = (this.DF_ObjetParam[id]['largeur_cadre'] > this.DF_ObjetParam[id]['largeur_def'] &&  this.DF_ObjetParam[id]['psinit'] == 0 ) ? this.DF_ObjetParam[id]['largeur_cadre'] - this.DF_ObjetParam[id]['largeur_def'] : this.DF_ObjetParam[id]['psinit'];
 
 
			this.DF_ObjetParam[id]['pscrnt'] = this.DF_ObjetParam[id]['psinit'];
 
			this.DF_ObjetParam[id]['sens'] = 1;
 
 
			this.DF_ObjetParam[id]['p_retour'] = this.DF_ObjetParam[id]['largeur_def'] >= this.DF_ObjetParam[id]['largeur_cadre'] ? this.DF_ObjetParam[id]['largeur_def'] - this.DF_ObjetParam[id]['largeur_cadre'] : 0;
 
 
			this.DF_ObjetParam[id]['largeur_def'] += this.DF_ObjetParam[id]['b_esp'];						
 
 
			this.DF_ObjetParam[id]['p_retour'] = this.DF_ObjetParam[id]['mode'] == 'b' ? this.DF_ObjetParam[id]['largeur_def'] : this.DF_ObjetParam[id]['p_retour'];
 
 
			if (this.DF_ObjetParam[id]['mode'] == 'r' && this.DF_ObjetParam[id]['largeur_def'] == this.DF_ObjetParam[id]['largeur_cadre'] && this.DF_ObjetParam[id]['psinit'] == 0) this.DF_ObjetParam[id]['largeur_def'] = 0;
 
 
			if (this.DF_ObjetParam[id]['largeur_def'] > 0 && this.DF_ObjetParam[id]['mode'] == 'b') Ajout_clone(id);
 
			id_c.style.visibility = "visible";
 
		}
	}
 
 
 
 
	function Ajout_clone(id) 
	{	   	
 
			   var div_contenu = document.createElement("div");
 
			   var nb_noeud = this.DF_ObjetParam[id]['id_defile'].childNodes.length;
 
			   for (var i = 0; i < nb_noeud ; i++) 
 
				   {				   
					div_contenu.appendChild(this.DF_ObjetParam[id]['id_defile'].firstChild.cloneNode(true));
					this.DF_ObjetParam[id]['id_defile'].removeChild(this.DF_ObjetParam[id]['id_defile'].firstChild);
				   }
 
 
			   if (this.DF_ObjetParam[id]['b_esp'] > 0)
 
				   {	   
					this.DF_ObjetParam[id]['sens_ini'] == 'g' ? div_contenu.style.marginRight = this.DF_ObjetParam[id]['b_esp']+'px' : div_contenu.style.marginLeft = this.DF_ObjetParam[id]['b_esp']+'px';   
				   }
 
			   div_contenu.style.display = "inline";
 
			   this.DF_ObjetParam[id]['id_defile'].appendChild(div_contenu.cloneNode(true));
 
			   var nb_clone = Math.ceil(this.DF_ObjetParam[id]['largeur_cadre']/(this.DF_ObjetParam[id]['largeur_def'])); 	
 
			   this.DF_ObjetParam[id]['id_defile'].style.width = ((nb_clone+1) * this.DF_ObjetParam[id]['largeur_def'])+'px';
 
			   for (var j = 0; j < nb_clone ; j++)
 
				   {	 
					this.DF_ObjetParam[id]['id_defile'].appendChild(this.DF_ObjetParam[id]['id_defile'].firstChild.cloneNode(true));    
				   }
	}
 
 
 
 
	function Boucle_cont(id)
	{
		this.DF_ObjetParam[id]['delaicrnt'] = this.DF_ObjetParam[id]['vitesse'];
		this.DF_ObjetParam[id]['inverse'] = 1;
 
 
		if(this.DF_ObjetParam[id]['pscrnt'] == - this.DF_ObjetParam[id]['p_retour'])
 
				{					
				this.DF_ObjetParam[id]['id_defile'].appendChild(this.DF_ObjetParam[id]['id_defile'].firstChild.cloneNode(true));  
				this.DF_ObjetParam[id]['id_defile'].removeChild(this.DF_ObjetParam[id]['id_defile'].firstChild); 
 
				this.DF_ObjetParam[id]['inverse'] = -1;
 
				this.DF_ObjetParam[id]['pscrnt'] = 0;
 
				this.DF_ObjetParam[id]['sens'] = -1;		
				}
 
				else
 
				{
				if(this.DF_ObjetParam[id]['pscrnt'] == this.DF_ObjetParam[id]['psinit'])
 
					{
					this.DF_ObjetParam[id]['sens'] *= -1;
					this.DF_ObjetParam[id]['delaicrnt'] = this.DF_ObjetParam[id]['pause']; 
					}
				}
 
 
			 this.DF_ObjetParam[id]['sens_ini'] == 'g' ? this.DF_ObjetParam[id]['id_defile'].style.left = this.DF_ObjetParam[id]['pscrnt']+"px" : this.DF_ObjetParam[id]['id_defile'].style.right = this.DF_ObjetParam[id]['pscrnt']+"px" ;
 
			this.DF_ObjetParam[id]['pscrnt'] += this.DF_ObjetParam[id]['sens']; 
 
	}
 
 
 
 
function Boucle_ar (id) 
	{
		this.DF_ObjetParam[id]['delaicrnt'] = this.DF_ObjetParam[id]['vitesse'];
		this.DF_ObjetParam[id]['inverse'] = 1;
 
		if(this.DF_ObjetParam[id]['pscrnt']  == - this.DF_ObjetParam[id]['p_retour'] || this.DF_ObjetParam[id]['pscrnt'] == this.DF_ObjetParam[id]['psinit'])
			{
			this.DF_ObjetParam[id]['inverse'] = -1;
			this.DF_ObjetParam[id]['delaicrnt'] = this.DF_ObjetParam[id]['pause']; 
			this.DF_ObjetParam[id]['sens'] *= -1;
			} 
 
		this.DF_ObjetParam[id]['sens_ini'] == 'g' ? this.DF_ObjetParam[id]['id_defile'].style.left = this.DF_ObjetParam[id]['pscrnt']+"px" : this.DF_ObjetParam[id]['id_defile'].style.right = this.DF_ObjetParam[id]['pscrnt']+"px" ;
 
		this.DF_ObjetParam[id]['pscrnt'] += this.DF_ObjetParam[id]['sens']; 
	}
 
}
 
 
 
 
function DF_ObjetNavigMous(id,etat) 
{
	if(typeof this.DF_ObjetParam != 'undefined' && typeof this.DF_ObjetParam[id] != 'undefined' && this.DF_ObjetParam[id]['id_defile'] != null && typeof this.DF_ObjetParam[id]['Timer'] == 'number') 
		{
		clearTimeout(this.DF_ObjetParam[id]['Timer']);
		if (etat == 'out') DF_ObjetDefilant(id);
		}
}
 
 
 
 
function DF_ObjetSensInverse(id) 
{
if(typeof this.DF_ObjetParam != 'undefined' && typeof this.DF_ObjetParam[id] != 'undefined' && this.DF_ObjetParam[id]['id_defile'] != null && typeof this.DF_ObjetParam[id]['Timer'] == 'number' && this.DF_ObjetParam[id]['inverse'] == 1 && !(this.DF_ObjetParam[id]['pscrnt']  == - this.DF_ObjetParam[id]['p_retour'] || this.DF_ObjetParam[id]['pscrnt'] == this.DF_ObjetParam[id]['psinit'])) this.DF_ObjetParam[id]['sens'] *= -1;	
}
 
 
 
 
function addLoad_DF_ObjetDefilant(func) {
 
		if (window.addEventListener)
        	{
      			window.addEventListener("load", func, false);
    		}
        else if (document.addEventListener)
        	{
      			document.addEventListener("load", func, false);
    		}
        else if (window.attachEvent)
        	{
      			window.attachEvent("onload", func);
    		}
}
 
-->
 
 
 
 
 
<!--
addLoad_DF_ObjetDefilant(function(){DF_ObjetDefilant('images_defilant','420','r','g','10','25','0','1500')});
addLoad_DF_ObjetDefilant(function(){DF_ObjetDefilant('texte_defilant','auto','b','g','15','100','50','250')});
-->

j'avoue j'ai rien compris ce script sauf qu'il fé defilement automatiquement de mon image et quand je survole et s'arrête , je veux remplacer ça par un défilement dépend de mouvement de souris horizontalement

[ABCIWEB]

Oui il s'arrête quand tu survole l'image mais tu peux inverser le sens de défilement (si défilement en cours) en cliquant sur la flèche qui se trouve en bas du cadre comme dans l'exemple que je t'ai donné plus haut.
Si bien que tu peux naviguer comme bon te semble mais par un click sur le bouton et non pas en déplaçant la souris sur l'image.

Eventuellement on pourrait se servir de ce même bouton pour faire démarrer le défilement onclick, l'inverser aux clicks suivants, puis l'arrêter onmouseout, comme dans cet autre exemple

Mais je n'ai pas prévu de navigation sur l'image avec la souris parce que je ne trouve pas ça pratique (ça saccade et quand on veut fixer l'image c'est souvent le bin's) donc désolé si tu tiens à ce fonctionnement précis car ça me prendrait trop de temps à développer et le temps me manque pour l'instant

[sooprano]

Oui il s'arrête quand tu survole l'image mais tu peux inverser le sens de défilement (si défilement en cours) en cliquant sur la flèche qui se trouve en bas du cadre comme dans l'exemple que je t'ai donné plus haut.
Si bien que tu peux naviguer comme bon te semble mais par un click sur le bouton et non pas en déplaçant la souris sur l'image.

Eventuellement on pourrait se servir de ce même bouton pour faire démarrer le défilement onclick, l'inverser aux clicks suivants, puis l'arrêter onmouseout, comme dans cet autre exemple

Mais je n'ai pas prévu de navigation sur l'image avec la souris parce que je ne trouve pas ça pratique (ça saccade et quand on veut fixer l'image c'est souvent le bin's) donc désolé si tu tiens à ce fonctionnement précis car ça me prendrait trop de temps à développer et le temps me manque pour l'instant

wi merci pour ton aide, donc ca serai difficile de realiser cet effet

http://www.webdesignerwall.com/tutor...allax-gallery/

qui est en flash avec js.
cet effet ce base sur quand tu bouge curseur l'image se défile quand tu stop l'image stop.

[ABCIWEB]

Une remarque au passage concernant le fonctionnement du lien que tu donnes :
Quand je me rend sur la démo je vois une image fixe et rien ne me dit qu'elle peut défiler. Par hasard si je survole l'image sur la droite ça défile mais pas si je la survole sur la gauche. Le fonctionnement n'est donc pas clair pour un visiteur lambda alors qu'avec un bouton de navigation (que tu pourrais customiser comme tu veux) placé dans le bas du cadre comme dans cet exemple, il n'y a pas d'ambiguïté.

Je t'ai proposé cette alternative en précisant bien "si le fonctionnement de cet exemple te convient ... " .. et l'on peut facilement faire des variantes (défilement automatique ou non etc.) mais la navigation gauche-droite se fait sur un bouton. Pour dire que si tu souhaites absolument une navigation gauche-droite au survol sur l'image il sera certainement plus simple de regarder vers des plugin jquery que d'essayer de le faire à partir de cette fonction.

[sooprano]

Une remarque au passage concernant le fonctionnement du lien que tu donnes :
Quand je me rend sur la démo je vois une image fixe et rien ne me dit qu'elle peut défiler. Par hasard si je survole l'image sur la droite ça défile mais pas si je la survole sur la gauche. Le fonctionnement n'est donc pas clair pour un visiteur lambda alors qu'avec un bouton de navigation (que tu pourrais customiser comme tu veux) placé dans le bas du cadre comme dans cet exemple, il n'y a pas d'ambiguïté.

Je t'ai proposé cette alternative en précisant bien "si le fonctionnement de cet exemple te convient ... " .. et l'on peut facilement faire des variantes (défilement automatique ou non etc.) mais la navigation gauche-droite se fait sur un bouton. Pour dire que si tu souhaites absolument une navigation gauche-droite au survol sur l'image il sera certainement plus simple de regarder vers des plugin jquery que d'essayer de le faire à partir de cette fonction.

ok c'est bon ça me convient bien, bon si je veux accelerer le defilement, il me semble qu'il est un peu long

[ABCIWEB]

Voici les details sur les paramètres de la fonction:

Dans l'exemple suivant, le paramétrage et le chargement de la fonction "DF_ObjetDefilant" se fait dans le second bloc javascript à la ligne :
addLoad_DF_ObjetDefilant(function(){DF_ObjetDefilant(id,id_dim,mode,sens,vit,pos,b_esp,pause)});


DETAIL DES PARAMETRES DE LA FONCTION
DF_ObjetDefilant(id, id_dim, mode, sens, vit, pos, b_esp, pause)

Le premier paramètre de la fonction DF_ObjetDefilant - l'id du div défilant - doit être obligatoirement renseigné (les autres paramètres possèdent des valeurs par défaut).

id = ID de l'objet défilant (et non pas du cadre).

id_dim = Cette valeur peut être non renseignée, ou laissée vide, ou paramétrée sur 'auto', uniquement si le code html inclus dans le div défilant mentionne les dimensions (largeur + hauteur) des éventuelles images.
Si vous ne mentionnez pas la dimension des images à l'intérieur du div défilant, indiquez pour ce paramètre : la largeur totale (en pixels) du div défilant pour un défilement horizontal, ou la hauteur totale du div défilant pour un défilement vertical.
('auto' par défaut)

mode = 'b' pour boucle continue, 'r' pour aller-retour, ('b' par défaut)

sens = 'g' pour défilement de droite à gauche, 'd' pour l'inverse, 'h' pour défilement de bas en haut, 'b' pour l'inverse ('g' par défaut)

vit = vitesse de l'objet défilant entre 7 et environ 50 (ou plus si besoin). Les valeurs les plus petites sont les plus rapides. (20 par défaut)

pos = position initiale de départ en pourcentage par rapport à la largeur du cadre.
A noter que lorsque la largeur du cadre est supérieure à la largeur de l'objet défilant - et uniquement dans ce cas - la valeur 0 est utilisée pour calculer la position qui permet de caler la fin de l'objet défilant sur le bord du cadre afin qu'il soit visible en totalité avant le mouvement. (0 par défaut)

b_esp = espacement en pourcentage par rapport à la largeur du cadre entre deux boucles pour les boucles continues. N'a pas d'incidence pour le mode aller-retour. (0 par défaut)

pause = pause en millisecondes avant le départ automatique de l'objet défilant. Ce paramètre est également pris en compte pour le retour dans le mode aller-retour. (0 par défaut)



Notes :

- Vous disposez des fonctions "DF_ObjetDefilant_On", "DF_ObjetDefilant_Off", "DF_ObjetDefilant_On_Off", "DF_ObjetDefilant_On_Inverse" et "DF_ObjetDefilant_Inverse" pour contrôler le défilement avec les évènements de votre choix (onclick, mouseover, onmouseout...). Toutes ces fonctions prennent comme paramètre l'id du bloc défilant ex :
mouseover = "DF_ObjetDefilant_Off('id_defilant')".

- Vous pouvez faire défiler plusieurs objets défilants dans une même page.

- Les paramètres exprimés en pourcentages - "pos" et "b_esp" - supportent les valeurs décimales avec le point comme séparateur.

- Le CSS du conteneur du bloc défilant est invariant mais doit être présent (cf exemple ci-dessous). Par ailleurs, ne pas paramétrer des styles de positionnement et de largeur sur le DIV de l'objet défilant. Renseignez ces paramètres dans le cadre de l'objet défilant.

- Pour compatibilité avec IE6 (et peut-être certains autres navigateurs) aucun id de votre page ne doit se nommer DF_ObjetParam

- Les risques de collision avec d'autres scripts sont peu probables puisqu'ils sont limités aux noms des fonctions "DF_ObjetDefilant", "DF_ObjetNavigMous", "DF_ObjetSensInverse", "DF_ObjetDefilant_On", "DF_ObjetDefilant_Off", "DF_ObjetDefilant_On_Off", "DF_ObjetDefilant_On_Inverse", "DF_ObjetDefilant_Inverse", "addLoad_DF_ObjetDefilant" et à celui de la variable globale "DF_ObjetParam".

- Fonction compatible XHTML 1.1 et CSS 2.1

Dans le code source de cet exemple c'est donc la ligne

DF_ObjetDefilant(id,'auto','r','g','8','0','0','500');

inclue dans la fonction javascript "Marche_arret" que tu peux paramétrer.

La vitesse est le cinquième paramètre, ici à 8. Tu peux essayer de le mettre à 7 (plus le nombre est petit plus ça va vite) mais il ne devrait pas y avoir beaucoup de différence (ou presque imperceptible).
Cela vient du fait qu'on arrive aux limites des possibilités des navigateurs actuels. Pour un défilement fluide, tu n'obtiendrais donc pas mieux avec d'autres codes javascript (jquery ou autre) puisque ce n'est pas dépendant du code.

Pour un déplacement plus rapide et à la fois fluide je connais pas de solution en javascript

La seule chose que l'on pourrait faire est un déplacement par pas de deux pixels, au lieu d'un déplacement par pas d'un pixel comme dans cette fonction. Le problème est que le défilement ne serait pas fluide mais forcément saccadé. Et comme je déteste les saccades (désagréable à regarder... fatigue visuelle... effet amateur...), je n'ai pas prévu cette option dans le développement de cette fonction.

Note : Le code source de l'exemple que j'ai donné en lien fait appel au fichier "objet_defilant.js" situé sur mon site à la ligne

<script type="text/javascript" src="http://www.abciweb.net/Scripts/objet_defilant.js"></script>

... inutile de préciser qu'il est important de rapatrier ce fichier "objet_defilant.js" sur ton serveur pour ne pas être dépendant de mon lien qui pourrait devenir invalide un jour ou l'autre Le code du fichier "objet_defilant.js" est :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
// Objets défilants A. Bontemps, abciweb.net Version 2.2
function DF_ObjetDefilant(id,id_dim,mode,sens,vit,pos,b_esp,pause)
{
   this.DF_ObjetParam = typeof this.DF_ObjetParam == 'undefined' ? new Array() : this.DF_ObjetParam;   
   this.DF_ObjetParam[id] = typeof this.DF_ObjetParam[id] == 'undefined' ? new Array() : this.DF_ObjetParam[id];   
 
   if(typeof this.DF_ObjetParam[id]['id_defile'] == 'undefined') {Set_param (id,id_dim,mode,sens,vit,pos,b_esp,pause);}
   else
   if (this.DF_ObjetParam[id]['dim_defilant'] > 0)
   {
      if (this.DF_ObjetParam[id]['mode'] == 'r') {Boucle_ar(id);} else {Boucle_cont(id);}
 
      this.DF_ObjetParam[id]['Timer'] = setTimeout(function(){DF_ObjetDefilant(id)},this.DF_ObjetParam[id]['delaicrnt']);   
   }
 
 
 
   function Set_param (id,id_dim,mode,sens,vit,pos,b_esp,pause)
   {   
      var id_d = null;
      var id_c = null;
      var id_cc = null;
 
 
      if(!(id_d = document.getElementById(id))) {id_d = null;} else if(!(id_c = id_d.parentNode)) {id_c = null;}
      else if(!(id_cc = id_c.parentNode)) {id_cc = null;};
 
      if(id_c != null && id_cc != null && id_d != null)
      {
      function is_all_ws ( nod )
         {
           // Use ECMA-262 Edition 3 String and RegExp features
           return !(/[^\t\n\r ]/.test(nod.data));
         }
 
 
      function is_ignorable ( nod )
         {
           return (nod.nodeType == 8) || // A comment node
                ( (nod.nodeType == 3) && is_all_ws(nod) ); // a text node, all ws
         }
 
 
      function trim_debut (myString)
         {
            return myString.replace(/^\s+/g,'')
         }
 
 
      function trim_fin (myString)
         {
            return myString.replace(/\s+$/g,'')
         }
 
 
      // Nettoyage mise en page html Mozilla Chrome...
      if (id_d != null)
         {
            while (id_d.hasChildNodes() && is_ignorable(id_d.lastChild)) {id_d.removeChild(id_d.lastChild);}
            while (id_d.hasChildNodes() && is_ignorable(id_d.firstChild)) {id_d.removeChild(id_d.firstChild);}
         }   
      }
 
      if(id_c != null && id_cc != null && id_d != null && id_d.hasChildNodes())
         {
            this.DF_ObjetParam[id]['instance'] = typeof this.DF_ObjetParam[id]['instance'] == 'undefined' ? function () {DF_ObjetDefilant(id,id_dim,mode,sens,vit,pos,b_esp,pause);} : this.DF_ObjetParam[id]['instance'];
 
            this.DF_ObjetParam[id]['sens_ini'] = typeof sens != 'undefined' && (sens == 'g' || sens == 'd' || sens == 'h' || sens == 'b') ? sens : 'g';
 
            this.DF_ObjetParam[id]['sens_horizontal'] = this.DF_ObjetParam[id]['sens_ini'] == 'g' || this.DF_ObjetParam[id]['sens_ini'] == 'd' ? true : false;   
 
            id_cc.style.overflow = "hidden";
 
            id_c.style.visibility = "hidden";
            id_c.style.position = "relative";
            id_c.style.overflow = "hidden";
 
 
            id_d.style.position = "absolute";
            id_d.style.width = "auto";
            id_d.style.height = "auto";
 
 
            // Nettoyage espaces vides en début de défilant pour le mode horizontal
            var elem = id_d.firstChild;   
 
            if (elem.nodeType == 3 && this.DF_ObjetParam[id]['sens_horizontal'])
               {
                  var noeud_debut = document.createTextNode(trim_debut(elem.nodeValue));
                  id_d.replaceChild(noeud_debut, id_d.firstChild);
               }
 
            // Nettoyage espaces vides en fin de défilant
            elem = id_d.lastChild;   
 
            if (elem.nodeType == 3)
               {
                  var noeud_fin = document.createTextNode(trim_fin(elem.nodeValue));
                  id_d.replaceChild(noeud_fin, id_d.lastChild);
               }
 
 
            var div_defile = id_d.cloneNode(true);
 
            var espace_insecable = document.createTextNode("\u00a0");
 
            // Ajoute un espace insécable "\u00a0" si 'BR' est en fin de défilant pour le mode vertical (pour ie)
            if(!this.DF_ObjetParam[id]['sens_horizontal'] && div_defile.lastChild.nodeName == 'BR')
            {
               div_defile.appendChild(espace_insecable);
            }
 
 
            var c = document.createElement("div");
            c.style.height = "100%";
 
            var nb_noeud = id_c.childNodes.length;
 
 
            // Dimensions du cadre
            for (var i = 0; i < nb_noeud ; i++) {id_c.removeChild(id_c.firstChild);}
            id_c.appendChild(c);
 
            this.DF_ObjetParam[id]['hauteur_cadre'] = c.offsetHeight;
            this.DF_ObjetParam[id]['largeur_cadre'] = c.offsetWidth;
            id_c.removeChild(id_c.firstChild);
            id_c.appendChild(div_defile);         
 
            this.DF_ObjetParam[id]['id_defile'] = document.getElementById(id);
 
 
            // Dimensions du défilant   
            var id_dim = typeof id_dim == 'undefined' || trim_debut(id_dim) == '' || id_dim == 'auto' ? 'auto' :  parseInt(id_dim);
 
            if(this.DF_ObjetParam[id]['sens_horizontal'])
               {
                  this.DF_ObjetParam[id]['id_defile'].style.height = this.DF_ObjetParam[id]['hauteur_cadre']+'px';
 
                  this.DF_ObjetParam[id]['largeur_def'] = id_dim == 'auto' ? undefined : id_dim;
 
                  if (typeof this.DF_ObjetParam[id]['largeur_def'] == 'undefined')
                  {
                     id_c.style.width = '1000000px';//largeur maxi de calcul
 
                     this.DF_ObjetParam[id]['largeur_def'] = this.DF_ObjetParam[id]['id_defile'].offsetWidth;
 
                     id_c.style.width = 'auto';
                  }
 
                  this.DF_ObjetParam[id]['id_defile'].style.width = this.DF_ObjetParam[id]['largeur_def']+'px';
 
               }
               else
               {
                  this.DF_ObjetParam[id]['id_defile'].style.width = this.DF_ObjetParam[id]['largeur_cadre']+'px';
 
                  this.DF_ObjetParam[id]['hauteur_def'] = id_dim == 'auto' ? this.DF_ObjetParam[id]['id_defile'].offsetHeight : id_dim;
 
                  this.DF_ObjetParam[id]['id_defile'].style.height = this.DF_ObjetParam[id]['hauteur_def']+'px';
               }
 
 
 
            this.DF_ObjetParam[id]['dim_cadre'] = this.DF_ObjetParam[id]['sens_horizontal'] ? this.DF_ObjetParam[id]['largeur_cadre'] : this.DF_ObjetParam[id]['hauteur_cadre'];
 
            this.DF_ObjetParam[id]['dim_defilant'] = this.DF_ObjetParam[id]['sens_horizontal'] ? this.DF_ObjetParam[id]['largeur_def'] : this.DF_ObjetParam[id]['hauteur_def'];
 
 
            this.DF_ObjetParam[id]['mode'] = typeof mode != 'undefined' && (mode == 'r' || mode == 'b') ? mode : 'b';
 
            this.DF_ObjetParam[id]['vitesse'] = typeof vit != 'undefined' && parseInt(vit) > 0 ? parseInt(vit) : 20;
 
            this.DF_ObjetParam[id]['psinit'] = typeof pos != 'undefined' && parseFloat(pos) > 0 ? parseFloat(pos) : 0;
 
            this.DF_ObjetParam[id]['b_esp'] = typeof b_esp != 'undefined' && parseFloat(b_esp) > 0 ? parseFloat(b_esp) : 0;      
 
            this.DF_ObjetParam[id]['pause'] = typeof pause != 'undefined' && parseInt(pause) > 0 ? parseInt(pause) : 0;
 
 
            this.DF_ObjetParam[id]['b_esp'] = this.DF_ObjetParam[id]['b_esp'] < 0  || this.DF_ObjetParam[id]['b_esp'] > 100 || this.DF_ObjetParam[id]['mode'] == 'r' ? 0 : Math.ceil(this.DF_ObjetParam[id]['b_esp'] * this.DF_ObjetParam[id]['dim_cadre']/100);
 
 
            this.DF_ObjetParam[id]['psinit'] = this.DF_ObjetParam[id]['psinit'] == 100 || this.DF_ObjetParam[id]['psinit'] < 0 || this.DF_ObjetParam[id]['psinit'] > 100 ? this.DF_ObjetParam[id]['dim_cadre'] : Math.ceil(this.DF_ObjetParam[id]['psinit']*this.DF_ObjetParam[id]['dim_cadre']/100);      
 
 
            this.DF_ObjetParam[id]['psinit'] = (this.DF_ObjetParam[id]['dim_cadre'] > this.DF_ObjetParam[id]['dim_defilant'] &&  this.DF_ObjetParam[id]['psinit'] == 0 ) ? this.DF_ObjetParam[id]['dim_cadre'] - this.DF_ObjetParam[id]['dim_defilant'] : this.DF_ObjetParam[id]['psinit'];
 
 
            this.DF_ObjetParam[id]['pscrnt'] = this.DF_ObjetParam[id]['psinit'];
 
            this.DF_ObjetParam[id]['sens'] = 1;
 
            this.DF_ObjetParam[id]['p_retour'] = this.DF_ObjetParam[id]['dim_defilant'] >= this.DF_ObjetParam[id]['dim_cadre'] ? this.DF_ObjetParam[id]['dim_defilant'] - this.DF_ObjetParam[id]['dim_cadre'] : 0;
 
            this.DF_ObjetParam[id]['dim_defilant'] += this.DF_ObjetParam[id]['b_esp'];                                          
 
            this.DF_ObjetParam[id]['p_retour'] = this.DF_ObjetParam[id]['mode'] == 'b' ? this.DF_ObjetParam[id]['dim_defilant'] : this.DF_ObjetParam[id]['p_retour'];
 
 
            if (this.DF_ObjetParam[id]['mode'] == 'r' && this.DF_ObjetParam[id]['dim_defilant'] == this.DF_ObjetParam[id]['dim_cadre'] && this.DF_ObjetParam[id]['psinit'] == 0) {this.DF_ObjetParam[id]['dim_defilant'] = 0;}
 
            if (this.DF_ObjetParam[id]['dim_defilant'] > 0 && this.DF_ObjetParam[id]['mode'] == 'b') {Ajout_clone(id);}
 
 
            id_cc.style.overflow = "visible";
            id_c.style.visibility = "visible";   
 
 
            this.DF_ObjetParam[id]['instance']();   
      }
   }
 
 
 
   function Ajout_clone(id)
   {         
      var div_contenu = document.createElement("div");
 
      var nb_noeud = this.DF_ObjetParam[id]['id_defile'].childNodes.length;
 
      for (var i = 0; i < nb_noeud ; i++)
         {               
            div_contenu.appendChild(this.DF_ObjetParam[id]['id_defile'].firstChild.cloneNode(true));
            this.DF_ObjetParam[id]['id_defile'].removeChild(this.DF_ObjetParam[id]['id_defile'].firstChild);
         }
 
      if (this.DF_ObjetParam[id]['b_esp'] > 0)
      {
         if (this.DF_ObjetParam[id]['sens_horizontal'])
            {
               this.DF_ObjetParam[id]['sens_ini'] == 'g' ? div_contenu.style.paddingRight = this.DF_ObjetParam[id]['b_esp']+'px' : div_contenu.style.paddingLeft = this.DF_ObjetParam[id]['b_esp']+'px';      
            }
            else
            {
               this.DF_ObjetParam[id]['sens_ini'] == 'h' ? div_contenu.style.paddingBottom = this.DF_ObjetParam[id]['b_esp']+'px' : div_contenu.style.paddingTop = this.DF_ObjetParam[id]['b_esp']+'px';               
            }
      }
 
      if (this.DF_ObjetParam[id]['sens_horizontal']) {div_contenu.style.display = "inline";};               
 
      this.DF_ObjetParam[id]['id_defile'].appendChild(div_contenu.cloneNode(true));
 
      var nb_clone = Math.ceil(this.DF_ObjetParam[id]['dim_cadre']/(this.DF_ObjetParam[id]['dim_defilant']));
 
      if (this.DF_ObjetParam[id]['sens_horizontal'])
         {
            this.DF_ObjetParam[id]['id_defile'].style.width = ((nb_clone+1) * this.DF_ObjetParam[id]['dim_defilant'])+'px';
         }
         else
         {
            this.DF_ObjetParam[id]['id_defile'].style.height = ((nb_clone+1) * this.DF_ObjetParam[id]['dim_defilant'])+'px';
         }
 
      for (var j = 0; j < nb_clone ; j++)
         {
            this.DF_ObjetParam[id]['id_defile'].appendChild(this.DF_ObjetParam[id]['id_defile'].firstChild.cloneNode(true));   
         }
   }
 
 
 
   function Boucle_cont(id)
   {
      this.DF_ObjetParam[id]['delaicrnt'] = this.DF_ObjetParam[id]['vitesse'];
      this.DF_ObjetParam[id]['inverse'] = 1;
 
      if(this.DF_ObjetParam[id]['pscrnt'] == - this.DF_ObjetParam[id]['p_retour'])   
            {               
               this.DF_ObjetParam[id]['id_defile'].appendChild(this.DF_ObjetParam[id]['id_defile'].firstChild.cloneNode(true)); 
               this.DF_ObjetParam[id]['id_defile'].removeChild(this.DF_ObjetParam[id]['id_defile'].firstChild);
 
               this.DF_ObjetParam[id]['inverse'] = -1;      
               this.DF_ObjetParam[id]['pscrnt'] = 0;
               this.DF_ObjetParam[id]['sens'] = -1;      
            }      
            else
            {
               if(this.DF_ObjetParam[id]['pscrnt'] == this.DF_ObjetParam[id]['psinit'])
                  {
                     this.DF_ObjetParam[id]['sens'] *= -1;
                     this.DF_ObjetParam[id]['delaicrnt'] = this.DF_ObjetParam[id]['pause'];
                  }
            }
 
         if (this.DF_ObjetParam[id]['sens_horizontal'])
            {
               this.DF_ObjetParam[id]['sens_ini'] == 'g' ? this.DF_ObjetParam[id]['id_defile'].style.left = this.DF_ObjetParam[id]['pscrnt']+"px" : this.DF_ObjetParam[id]['id_defile'].style.right = this.DF_ObjetParam[id]['pscrnt']+"px" ;
            }
            else
            {
               this.DF_ObjetParam[id]['sens_ini'] == 'h' ? this.DF_ObjetParam[id]['id_defile'].style.top = this.DF_ObjetParam[id]['pscrnt']+"px" : this.DF_ObjetParam[id]['id_defile'].style.bottom = this.DF_ObjetParam[id]['pscrnt']+"px" ;
            }
 
         this.DF_ObjetParam[id]['pscrnt'] += this.DF_ObjetParam[id]['sens'];
   }
 
 
 
   function Boucle_ar (id)
   {
      this.DF_ObjetParam[id]['delaicrnt'] = this.DF_ObjetParam[id]['vitesse'];
      this.DF_ObjetParam[id]['inverse'] = 1;
 
      if(this.DF_ObjetParam[id]['pscrnt']  == - this.DF_ObjetParam[id]['p_retour'] || this.DF_ObjetParam[id]['pscrnt'] == this.DF_ObjetParam[id]['psinit'])
         {
            this.DF_ObjetParam[id]['inverse'] = -1;
            this.DF_ObjetParam[id]['delaicrnt'] = this.DF_ObjetParam[id]['pause'];
            this.DF_ObjetParam[id]['sens'] *= -1;
         }
 
      if (this.DF_ObjetParam[id]['sens_horizontal'])
         {      
            this.DF_ObjetParam[id]['sens_ini'] == 'g' ? this.DF_ObjetParam[id]['id_defile'].style.left = this.DF_ObjetParam[id]['pscrnt']+"px" : this.DF_ObjetParam[id]['id_defile'].style.right = this.DF_ObjetParam[id]['pscrnt']+"px" ;
         }
         else
         {
            this.DF_ObjetParam[id]['sens_ini'] == 'h' ? this.DF_ObjetParam[id]['id_defile'].style.top = this.DF_ObjetParam[id]['pscrnt']+"px" : this.DF_ObjetParam[id]['id_defile'].style.bottom = this.DF_ObjetParam[id]['pscrnt']+"px" ;
 
         }
 
      this.DF_ObjetParam[id]['pscrnt'] += this.DF_ObjetParam[id]['sens'];
   }
 
}
 
 
 
function DF_ObjetNavigMous(id,etat,nb)
{
   var nb = typeof nb == 'undefined'? 0 :  nb + 1;
 
   if(typeof this.DF_ObjetParam != 'undefined' && typeof this.DF_ObjetParam[id] != 'undefined' && this.DF_ObjetParam[id]['id_defile'] != null && typeof this.DF_ObjetParam[id]['instance'] != 'undefined' && typeof this.DF_ObjetParam[id]['Timer'] == 'number')
      {
         clearTimeout(this.DF_ObjetParam[id]['Timer']);
         this.DF_ObjetParam[id]['Timer'] = 0;
         if (etat == 'out') this.DF_ObjetParam[id]['instance']();
      }
      else if (nb < 30)//pour ancien navigateur avec chargement onload de DF_ObjetDefilant_Off(id)
      {
         setTimeout(function(){DF_ObjetNavigMous(id,etat,nb)},15);
      }
}
 
 
 
function DF_ObjetSensInverse (id)
{
   if(typeof this.DF_ObjetParam != 'undefined' && typeof this.DF_ObjetParam[id] != 'undefined' && this.DF_ObjetParam[id]['id_defile'] != null && typeof this.DF_ObjetParam[id]['Timer'] == 'number' && this.DF_ObjetParam[id]['inverse'] == 1 && !(this.DF_ObjetParam[id]['pscrnt']  == - this.DF_ObjetParam[id]['p_retour'] || this.DF_ObjetParam[id]['pscrnt'] == this.DF_ObjetParam[id]['psinit']))
      {
         this.DF_ObjetParam[id]['sens'] *= -1;
      }
}
 
 
 
function DF_ObjetDefilant_On (id)
{
   if(typeof this.DF_ObjetParam[id]['id_defile'] == 'undefined' && typeof this.DF_ObjetParam[id]['instance'] != 'undefined')
      {
         this.DF_ObjetParam[id]['instance']();   
      }
      else
      {
         DF_ObjetNavigMous(id,'out');
      }
}
 
 
 
function DF_ObjetDefilant_Off (id)
{
   DF_ObjetNavigMous(id,'over');
}
 
 
 
function DF_ObjetDefilant_On_Off (id)
{
   if(typeof this.DF_ObjetParam[id]['id_defile'] == 'undefined' || (typeof this.DF_ObjetParam[id]['Timer'] == 'number' && this.DF_ObjetParam[id]['Timer'] == 0))
      {
         DF_ObjetDefilant_On (id);
      }
      else
      {
         DF_ObjetNavigMous(id,'over');
      }
}
 
 
 
function DF_ObjetDefilant_On_Inverse (id)
{
   if(typeof this.DF_ObjetParam[id]['id_defile'] == 'undefined' || (typeof this.DF_ObjetParam[id]['Timer'] == 'number' && this.DF_ObjetParam[id]['Timer'] == 0))
      {
         DF_ObjetDefilant_On (id);
      }
      else
      {
         DF_ObjetSensInverse (id);
      }
}
 
 
 
function DF_ObjetDefilant_Inverse (id)
{
   if(typeof this.DF_ObjetParam[id]['Timer'] == 'number' && this.DF_ObjetParam[id]['Timer'] > 0)
      {
         DF_ObjetSensInverse (id);
      }
}
 
 
 
function addLoad_DF_ObjetDefilant(func)
{
   if (window.addEventListener)
      {
         window.addEventListener("load", func, false);
      }
   else if (document.addEventListener)
      {
         document.addEventListener("load", func, false);
      }
   else if (window.attachEvent)
      {
         window.attachEvent("onload", func);
      }
}

Code source de l'exemple :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Générateur objets défilants www.abciweb.net</title>
<script type="text/javascript" src="http://www.abciweb.net/Scripts/objet_defilant.js"></script>
 
<script type="text/javascript">
<!--
function Marche_arret (id)
{
	if(typeof this.DF_ObjetParam == 'undefined' || typeof this.DF_ObjetParam[id] == 'undefined') 
		{
			DF_ObjetDefilant(id,'auto','r','g','8','0','0','500');
		}
		else
		{
			DF_ObjetSensInverse(id);
		}
}
-->
</script>
 
 
 
<style type="text/css">
<!--
#cadre_images { 
	position: relative;
	border: 18px solid black;
	width:600px; 
	height:480px;
	margin: 2em auto 0 auto;
	overflow: hidden;
}
 
#bouton_navig {
position:relative;
width:40px;
margin:auto; 
cursor:pointer;
z-index:10;
top:-18px
}
-->
</style>
</head>
 
<body>
 
 
 <div id="cadre_images">
  		<div id="images_defilant"><img src="http://www.abciweb.net/PHOTO/panorama_001.jpg" alt="source image : http://badplayer.free.fr/" title="source image : http://badplayer.free.fr/" /></div>
 </div>
 
 
<div id="bouton_navig" onclick = "Marche_arret('images_defilant')" onmouseover = "DF_ObjetNavigMous('images_defilant','out')" onmouseout = "DF_ObjetNavigMous('images_defilant','over')"><img src="http://www.abciweb.net/images_nav/fleche_aller_retour_violet.png" width="40" height="15" alt="" title="" />
</div>
 
</body>
</html>

[ABCIWEB]

Bonjour,

Pour info,

Le code que j'ai indiqué dans le message précédent ne correspond plus au code source réel de l'exemple donné en lien car j'ai mis cette page à jour en tenant compte des dernières versions de la fonction de défilement qui a été notablement améliorée depuis la version de base indiquée quelques messages plus haut par sooprano.

Nouvelles fonctionnalités :

- Défilement horizontal ou vertical

- Fonctionne sans avoir à passer la dimension du défilant comme paramètre à la fonction dans tous les cas ex : une ou plusieurs images, images plus texte, texte.

- Nouvelles fonctions de commandes "DF_ObjetDefilant_On()", "DF_ObjetDefilant_Off()", "DF_ObjetDefilant_On_Off ()", "DF_ObjetDefilant_On_Inverse()", "DF_ObjetDefilant_Inverse()". Toutes ces fonctions prennent comme paramètre l'id du bloc défilant ex : onmouseover = "DF_ObjetDefilant_On('id_defilant')"




Nouveau code de la fonction de défilement :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
 
/* 
Le paramétrage et le chargement de la fonction DF_ObjetDefilant se fait dans un bloc javascript :
addLoad_DF_ObjetDefilant(function(){DF_ObjetDefilant(id,id_dim,mode,sens,vit,pos,b_esp,pause)});
 
 
DETAIL DES PARAMETRES DE LA FONCTION DF_ObjetDefilant(id,id_dim,mode,sens,vit,pos,b_esp,pause)
 
Le premier paramètre de la fonction DF_ObjetDefilant - l'id du div défilant - doit être obligatoirement renseigné (les autres paramètres possèdent des valeurs par défaut).
 
id = ID de l'objet défilant (et non pas du cadre).
 
id_dim = Cette valeur peut être non renseignée, ou laisée vide, ou paramétrée sur 'auto', uniquement si le code html inclus dans le div défilant mentionne les dimensions (largeur + hauteur) des éventuelles images. 
Si vous ne mentionnez pas la dimension des images à l'intérieur du div défilant, indiquez pour ce paramètre : la largeur totale (en pixels) du div défilant pour un défilement horizontal, ou la hauteur totale du div défilant pour un défilement vertical. 
('auto' par défaut)
 
mode = 'b' pour boucle continue, 'r' pour aller-retour, ('b' par défaut)
 
sens = 'g' pour défilement de droite à gauche, 'd' pour l'inverse, 'h' pour défilement de bas en haut, 'b' pour l'inverse ('g' par défaut)
 
vit = vitesse de l'objet défilant entre 7 et environ 50 (ou plus si besoin). Les valeurs les plus petites sont les plus rapides. (20 par défaut)
 
pos = position initiale de départ en pourcentage par rapport à la largeur du cadre.
A noter que lorsque la largeur du cadre est supérieure à la largeur de l'objet défilant - et uniquement dans ce cas - la valeur 0 est utilisée pour calculer la position qui permet de caler la fin de l'objet défilant sur le bord du cadre afin qu'il soit visible en totalité avant le mouvement. (0 par défaut)
 
b_esp = espacement en pourcentage par rapport à la largeur du cadre entre deux boucles pour les boucles continues. N'a pas d'incidence pour le mode aller-retour. (0 par défaut)
 
pause = pause en millisecondes avant le départ automatique de l'objet défilant. Ce paramètre est également pris en compte pour le retour dans le mode aller-retour. (0 par défaut)
 
 
 
Notes :
 
- Vous disposez des fonctions "DF_ObjetDefilant_On", "DF_ObjetDefilant_Off", "DF_ObjetDefilant_On_Off", "DF_ObjetDefilant_On_Inverse" et "DF_ObjetDefilant_Inverse" pour contrôler le défilement avec les évènements de votre choix (onclick, mouseover, onmouseout...). Toutes ces fonctions prennent comme paramètre l'id du bloc défilant ex :
mouseover = "DF_ObjetDefilant_Off('id_defilant')".
 
- Vous pouvez faire défiler plusieurs objets défilants dans une même page.
 
- Les paramètres exprimés en pourcentages - "pos" et "b_esp" - supportent les valeurs décimales avec le point comme séparateur.
 
- Eviter de paramétrer des styles directement sur le DIV de l'objet défilant et en particulier des paramètres de positionnement, de largeur ou de marges car ils pourraient interférer avec la fonction ou être ignorés. 
Les attributs pour formater votre objet défilant sont à renseigner dans les paramètres de la fonction pour ceux disponibles et dans le cadre CSS pour les autres. Vous pouvez aussi incorporer des styles à l'intérieur de l'objet défilant.
 
- Pour compatibilité avec IE6 (et peut-être certains autres navigateurs) aucun id de votre page ne doit se nommer DF_ObjetParam
 
- Les risques de collision avec d'autres scripts sont peu probables puisqu'ils sont limités aux noms des fonctions "DF_ObjetDefilant", "DF_ObjetNavigMous", "DF_ObjetSensInverse", "DF_ObjetDefilant_On", "DF_ObjetDefilant_Off", "DF_ObjetDefilant_On_Off", "DF_ObjetDefilant_On_Inverse", "DF_ObjetDefilant_Inverse", "addLoad_DF_ObjetDefilant" et à celui de la variable globale "DF_ObjetParam".
 
- Fonction compatible XHTML 1.1 et CSS 2.1
*/
// Objets défilants abciweb.net Version 2.1
function DF_ObjetDefilant(id,id_dim,mode,sens,vit,pos,b_esp,pause)
{
	this.DF_ObjetParam = typeof this.DF_ObjetParam == 'undefined' ? new Array() : this.DF_ObjetParam;	
	this.DF_ObjetParam[id] = typeof this.DF_ObjetParam[id] == 'undefined' ? new Array() : this.DF_ObjetParam[id];	
 
	if(typeof this.DF_ObjetParam[id]['id_defile'] == 'undefined') {Set_param (id,id_dim,mode,sens,vit,pos,b_esp,pause);}
	else
	if (this.DF_ObjetParam[id]['dim_defilant'] > 0)
	{
		if (this.DF_ObjetParam[id]['mode'] == 'r') {Boucle_ar(id);} else {Boucle_cont(id);}
 
		this.DF_ObjetParam[id]['Timer'] = setTimeout(function(){DF_ObjetDefilant(id)},this.DF_ObjetParam[id]['delaicrnt']);	
	}
 
 
 
	function Set_param (id,id_dim,mode,sens,vit,pos,b_esp,pause) 
	{	
		var id_d = null;
		var id_c = null;
		var id_cc = null;
 
 
		if(!(id_d = document.getElementById(id))) {id_d = null;} else if(!(id_c = id_d.parentNode)) {id_c = null;}
		else if(!(id_cc = id_c.parentNode)) {id_cc = null;};
 
		if(id_c != null && id_cc != null && id_d != null)
		{
		function is_all_ws ( nod )
			{
			  // Use ECMA-262 Edition 3 String and RegExp features
			  return !(/[^\t\n\r ]/.test(nod.data));
			}
 
 
		function is_ignorable ( nod )
			{
			  return (nod.nodeType == 8) || // A comment node
					 ( (nod.nodeType == 3) && is_all_ws(nod) ); // a text node, all ws
			}
 
 
		function trim_debut (myString)
			{
				return myString.replace(/^\s+/g,'')
			} 
 
 
		function trim_fin (myString)
			{
				return myString.replace(/\s+$/g,'')
			} 
 
 
		// Nettoyage mise en page html Mozilla Chrome...
		if (id_d != null) 
			{
				while (id_d.hasChildNodes() && is_ignorable(id_d.lastChild)) {id_d.removeChild(id_d.lastChild);}
				while (id_d.hasChildNodes() && is_ignorable(id_d.firstChild)) {id_d.removeChild(id_d.firstChild);}
			}	
		}
 
		if(id_c != null && id_cc != null && id_d != null && id_d.hasChildNodes())
			{
				this.DF_ObjetParam[id]['instance'] = typeof this.DF_ObjetParam[id]['instance'] == 'undefined' ? function () {DF_ObjetDefilant(id,id_dim,mode,sens,vit,pos,b_esp,pause);} : this.DF_ObjetParam[id]['instance'];
 
				this.DF_ObjetParam[id]['sens_ini'] = typeof sens != 'undefined' && (sens == 'g' || sens == 'd' || sens == 'h' || sens == 'b') ? sens : 'g';
 
				this.DF_ObjetParam[id]['sens_horizontal'] = this.DF_ObjetParam[id]['sens_ini'] == 'g' || this.DF_ObjetParam[id]['sens_ini'] == 'd' ? true : false;	
 
				id_cc.style.overflow = "hidden";
 
				id_c.style.visibility = "hidden"; 
				id_c.style.position = "relative";
				id_c.style.overflow = "hidden";
 
 
				id_d.style.position = "absolute";
				id_d.style.width = "auto";
				id_d.style.height = "auto";
 
 
				// Nettoyage espaces vides en début de défilant pour le mode horizontal
				var elem = id_d.firstChild;	
 
				if (elem.nodeType == 3 && this.DF_ObjetParam[id]['sens_horizontal']) 
					{
						var noeud_debut = document.createTextNode(trim_debut(elem.nodeValue)); 
						id_d.replaceChild(noeud_debut, id_d.firstChild);
					}
 
				// Nettoyage espaces vides en fin de défilant
				elem = id_d.lastChild;	
 
				if (elem.nodeType == 3) 
					{
						var noeud_fin = document.createTextNode(trim_fin(elem.nodeValue)); 
						id_d.replaceChild(noeud_fin, id_d.lastChild);
					}
 
 
				var div_defile = id_d.cloneNode(true);
 
				var espace_insecable = document.createTextNode("\u00a0"); 
 
				// Ajoute un espace insécable "\u00a0" si 'BR' est en fin de défilant pour le mode vertical (pour ie)
				if(!this.DF_ObjetParam[id]['sens_horizontal'] && div_defile.lastChild.nodeName == 'BR') 
				{
					div_defile.appendChild(espace_insecable);
				}
 
 
				var c = document.createElement("div");
				c.style.height = "100%";
 
				var nb_noeud = id_c.childNodes.length;
 
 
				// Dimensions du cadre
				for (var i = 0; i < nb_noeud ; i++) {id_c.removeChild(id_c.firstChild);}
				id_c.appendChild(c);
 
				this.DF_ObjetParam[id]['hauteur_cadre'] = c.offsetHeight;
				this.DF_ObjetParam[id]['largeur_cadre'] = c.offsetWidth;
				id_c.removeChild(id_c.firstChild);
				id_c.appendChild(div_defile);			
 
				this.DF_ObjetParam[id]['id_defile'] = document.getElementById(id);
 
 
				// Dimensions du défilant	
				var id_dim = typeof id_dim == 'undefined' || trim_debut(id_dim) == '' || id_dim == 'auto' ? 'auto' :  parseInt(id_dim);
 
				if(this.DF_ObjetParam[id]['sens_horizontal']) 
					{
						this.DF_ObjetParam[id]['id_defile'].style.height = this.DF_ObjetParam[id]['hauteur_cadre']+'px';
 
						this.DF_ObjetParam[id]['largeur_def'] = id_dim == 'auto' ? undefined : id_dim;
 
						if (typeof this.DF_ObjetParam[id]['largeur_def'] == 'undefined')
						{
							id_c.style.width = '1000000px';//largeur maxi de calcul
 
							this.DF_ObjetParam[id]['largeur_def'] = this.DF_ObjetParam[id]['id_defile'].offsetWidth;
 
							id_c.style.width = 'auto';
						}
 
						this.DF_ObjetParam[id]['id_defile'].style.width = this.DF_ObjetParam[id]['largeur_def']+'px';
 
					}
					else 
					{
						this.DF_ObjetParam[id]['id_defile'].style.width = this.DF_ObjetParam[id]['largeur_cadre']+'px';
 
						this.DF_ObjetParam[id]['hauteur_def'] = id_dim == 'auto' ? this.DF_ObjetParam[id]['id_defile'].offsetHeight : id_dim;
 
						this.DF_ObjetParam[id]['id_defile'].style.height = this.DF_ObjetParam[id]['hauteur_def']+'px';
					}
 
 
 
				this.DF_ObjetParam[id]['dim_cadre'] = this.DF_ObjetParam[id]['sens_horizontal'] ? this.DF_ObjetParam[id]['largeur_cadre'] : this.DF_ObjetParam[id]['hauteur_cadre'];
 
				this.DF_ObjetParam[id]['dim_defilant'] = this.DF_ObjetParam[id]['sens_horizontal'] ? this.DF_ObjetParam[id]['largeur_def'] : this.DF_ObjetParam[id]['hauteur_def'];
 
 
				this.DF_ObjetParam[id]['mode'] = typeof mode != 'undefined' && (mode == 'r' || mode == 'b') ? mode : 'b';
 
				this.DF_ObjetParam[id]['vitesse'] = typeof vit != 'undefined' && parseInt(vit) > 0 ? parseInt(vit) : 20;
 
				this.DF_ObjetParam[id]['psinit'] = typeof pos != 'undefined' && parseFloat(pos) > 0 ? parseFloat(pos) : 0;
 
				this.DF_ObjetParam[id]['b_esp'] = typeof b_esp != 'undefined' && parseFloat(b_esp) > 0 ? parseFloat(b_esp) : 0;		
 
				this.DF_ObjetParam[id]['pause'] = typeof pause != 'undefined' && parseInt(pause) > 0 ? parseInt(pause) : 0;
 
 
				this.DF_ObjetParam[id]['b_esp'] = this.DF_ObjetParam[id]['b_esp'] < 0  || this.DF_ObjetParam[id]['b_esp'] > 100 || this.DF_ObjetParam[id]['mode'] == 'r' ? 0 : Math.ceil(this.DF_ObjetParam[id]['b_esp'] * this.DF_ObjetParam[id]['dim_cadre']/100);
 
 
				this.DF_ObjetParam[id]['psinit'] = this.DF_ObjetParam[id]['psinit'] == 100 || this.DF_ObjetParam[id]['psinit'] < 0 || this.DF_ObjetParam[id]['psinit'] > 100 ? this.DF_ObjetParam[id]['dim_cadre'] : Math.ceil(this.DF_ObjetParam[id]['psinit']*this.DF_ObjetParam[id]['dim_cadre']/100);		
 
 
				this.DF_ObjetParam[id]['psinit'] = (this.DF_ObjetParam[id]['dim_cadre'] > this.DF_ObjetParam[id]['dim_defilant'] &&  this.DF_ObjetParam[id]['psinit'] == 0 ) ? this.DF_ObjetParam[id]['dim_cadre'] - this.DF_ObjetParam[id]['dim_defilant'] : this.DF_ObjetParam[id]['psinit'];
 
 
				this.DF_ObjetParam[id]['pscrnt'] = this.DF_ObjetParam[id]['psinit'];
 
				this.DF_ObjetParam[id]['sens'] = 1;
 
				this.DF_ObjetParam[id]['p_retour'] = this.DF_ObjetParam[id]['dim_defilant'] >= this.DF_ObjetParam[id]['dim_cadre'] ? this.DF_ObjetParam[id]['dim_defilant'] - this.DF_ObjetParam[id]['dim_cadre'] : 0;
 
				this.DF_ObjetParam[id]['dim_defilant'] += this.DF_ObjetParam[id]['b_esp'];														
 
				this.DF_ObjetParam[id]['p_retour'] = this.DF_ObjetParam[id]['mode'] == 'b' ? this.DF_ObjetParam[id]['dim_defilant'] : this.DF_ObjetParam[id]['p_retour'];
 
 
				if (this.DF_ObjetParam[id]['mode'] == 'r' && this.DF_ObjetParam[id]['dim_defilant'] == this.DF_ObjetParam[id]['dim_cadre'] && this.DF_ObjetParam[id]['psinit'] == 0) {this.DF_ObjetParam[id]['dim_defilant'] = 0;}
 
				if (this.DF_ObjetParam[id]['dim_defilant'] > 0 && this.DF_ObjetParam[id]['mode'] == 'b') {Ajout_clone(id);}
 
 
				id_cc.style.overflow = "visible";
				id_c.style.visibility = "visible";	
 
 
				this.DF_ObjetParam[id]['instance']();	
		}
	}
 
 
 
	function Ajout_clone(id) 
	{	   	
		var div_contenu = document.createElement("div");
 
		var nb_noeud = this.DF_ObjetParam[id]['id_defile'].childNodes.length;
 
		for (var i = 0; i < nb_noeud ; i++) 
			{				   
				div_contenu.appendChild(this.DF_ObjetParam[id]['id_defile'].firstChild.cloneNode(true));
				this.DF_ObjetParam[id]['id_defile'].removeChild(this.DF_ObjetParam[id]['id_defile'].firstChild);
			}
 
		if (this.DF_ObjetParam[id]['b_esp'] > 0)
		{
			if (this.DF_ObjetParam[id]['sens_horizontal'])
				{
					this.DF_ObjetParam[id]['sens_ini'] == 'g' ? div_contenu.style.marginRight = this.DF_ObjetParam[id]['b_esp']+'px' : div_contenu.style.marginLeft = this.DF_ObjetParam[id]['b_esp']+'px';		
				}
				else 
				{
					this.DF_ObjetParam[id]['sens_ini'] == 'h' ? div_contenu.style.marginBottom = this.DF_ObjetParam[id]['b_esp']+'px' : div_contenu.style.marginTop = this.DF_ObjetParam[id]['b_esp']+'px';					
				}
		}
 
		if (this.DF_ObjetParam[id]['sens_horizontal']) {div_contenu.style.display = "inline";};					
 
		this.DF_ObjetParam[id]['id_defile'].appendChild(div_contenu.cloneNode(true));
 
		var nb_clone = Math.ceil(this.DF_ObjetParam[id]['dim_cadre']/(this.DF_ObjetParam[id]['dim_defilant']));
 
		if (this.DF_ObjetParam[id]['sens_horizontal']) 
			{
			   this.DF_ObjetParam[id]['id_defile'].style.width = ((nb_clone+1) * this.DF_ObjetParam[id]['dim_defilant'])+'px';
			}
			else
			{
			   this.DF_ObjetParam[id]['id_defile'].style.height = ((nb_clone+1) * this.DF_ObjetParam[id]['dim_defilant'])+'px';
			}
 
		for (var j = 0; j < nb_clone ; j++)
			{
				this.DF_ObjetParam[id]['id_defile'].appendChild(this.DF_ObjetParam[id]['id_defile'].firstChild.cloneNode(true));    
			}
	}
 
 
 
	function Boucle_cont(id)
	{
		this.DF_ObjetParam[id]['delaicrnt'] = this.DF_ObjetParam[id]['vitesse'];
		this.DF_ObjetParam[id]['inverse'] = 1;
 
		if(this.DF_ObjetParam[id]['pscrnt'] == - this.DF_ObjetParam[id]['p_retour'])	
				{					
					this.DF_ObjetParam[id]['id_defile'].appendChild(this.DF_ObjetParam[id]['id_defile'].firstChild.cloneNode(true));  
					this.DF_ObjetParam[id]['id_defile'].removeChild(this.DF_ObjetParam[id]['id_defile'].firstChild); 
 
					this.DF_ObjetParam[id]['inverse'] = -1;		
					this.DF_ObjetParam[id]['pscrnt'] = 0;
					this.DF_ObjetParam[id]['sens'] = -1;		
				}		
				else
				{
					if(this.DF_ObjetParam[id]['pscrnt'] == this.DF_ObjetParam[id]['psinit'])
						{
							this.DF_ObjetParam[id]['sens'] *= -1;
							this.DF_ObjetParam[id]['delaicrnt'] = this.DF_ObjetParam[id]['pause']; 
						}
				}
 
			if (this.DF_ObjetParam[id]['sens_horizontal'])
				{
					this.DF_ObjetParam[id]['sens_ini'] == 'g' ? this.DF_ObjetParam[id]['id_defile'].style.left = this.DF_ObjetParam[id]['pscrnt']+"px" : this.DF_ObjetParam[id]['id_defile'].style.right = this.DF_ObjetParam[id]['pscrnt']+"px" ;
				}
				else
				{
					this.DF_ObjetParam[id]['sens_ini'] == 'h' ? this.DF_ObjetParam[id]['id_defile'].style.top = this.DF_ObjetParam[id]['pscrnt']+"px" : this.DF_ObjetParam[id]['id_defile'].style.bottom = this.DF_ObjetParam[id]['pscrnt']+"px" ;
				}
 
			this.DF_ObjetParam[id]['pscrnt'] += this.DF_ObjetParam[id]['sens']; 
	}
 
 
 
	function Boucle_ar (id) 
	{
		this.DF_ObjetParam[id]['delaicrnt'] = this.DF_ObjetParam[id]['vitesse'];
		this.DF_ObjetParam[id]['inverse'] = 1;
 
		if(this.DF_ObjetParam[id]['pscrnt']  == - this.DF_ObjetParam[id]['p_retour'] || this.DF_ObjetParam[id]['pscrnt'] == this.DF_ObjetParam[id]['psinit'])
			{
				this.DF_ObjetParam[id]['inverse'] = -1;
				this.DF_ObjetParam[id]['delaicrnt'] = this.DF_ObjetParam[id]['pause']; 
				this.DF_ObjetParam[id]['sens'] *= -1;
			}
 
		if (this.DF_ObjetParam[id]['sens_horizontal'])
			{		
				this.DF_ObjetParam[id]['sens_ini'] == 'g' ? this.DF_ObjetParam[id]['id_defile'].style.left = this.DF_ObjetParam[id]['pscrnt']+"px" : this.DF_ObjetParam[id]['id_defile'].style.right = this.DF_ObjetParam[id]['pscrnt']+"px" ;
			}
			else
			{
				this.DF_ObjetParam[id]['sens_ini'] == 'h' ? this.DF_ObjetParam[id]['id_defile'].style.top = this.DF_ObjetParam[id]['pscrnt']+"px" : this.DF_ObjetParam[id]['id_defile'].style.bottom = this.DF_ObjetParam[id]['pscrnt']+"px" ;
 
			}
 
		this.DF_ObjetParam[id]['pscrnt'] += this.DF_ObjetParam[id]['sens']; 
	}
 
}
 
 
 
function DF_ObjetNavigMous(id,etat,nb) 
{
	var nb = typeof nb == 'undefined'? 0 :  nb + 1;
 
	if(typeof this.DF_ObjetParam != 'undefined' && typeof this.DF_ObjetParam[id] != 'undefined' && this.DF_ObjetParam[id]['id_defile'] != null && typeof this.DF_ObjetParam[id]['instance'] != 'undefined' && typeof this.DF_ObjetParam[id]['Timer'] == 'number') 
		{
			clearTimeout(this.DF_ObjetParam[id]['Timer']);
			this.DF_ObjetParam[id]['Timer'] = 0;
			if (etat == 'out') this.DF_ObjetParam[id]['instance']();
		}
		else if (nb < 30)//pour ancien navigateur avec chargement onload de DF_ObjetDefilant_Off(id)
		{
			setTimeout(function(){DF_ObjetNavigMous(id,etat,nb)},15);
		}
}
 
 
 
function DF_ObjetSensInverse (id) 
{
	if(typeof this.DF_ObjetParam != 'undefined' && typeof this.DF_ObjetParam[id] != 'undefined' && this.DF_ObjetParam[id]['id_defile'] != null && typeof this.DF_ObjetParam[id]['Timer'] == 'number' && this.DF_ObjetParam[id]['inverse'] == 1 && !(this.DF_ObjetParam[id]['pscrnt']  == - this.DF_ObjetParam[id]['p_retour'] || this.DF_ObjetParam[id]['pscrnt'] == this.DF_ObjetParam[id]['psinit'])) 
		{
			this.DF_ObjetParam[id]['sens'] *= -1;
		}
}
 
 
 
function DF_ObjetDefilant_On (id)
{
	if(typeof this.DF_ObjetParam[id]['id_defile'] == 'undefined' && typeof this.DF_ObjetParam[id]['instance'] != 'undefined') 
		{
			this.DF_ObjetParam[id]['instance']();	
		}
		else
		{
			DF_ObjetNavigMous(id,'out');
		}
}
 
 
 
function DF_ObjetDefilant_Off (id)
{
	DF_ObjetNavigMous(id,'over');
}
 
 
 
function DF_ObjetDefilant_On_Off (id)
{
	if(typeof this.DF_ObjetParam[id]['id_defile'] == 'undefined' || (typeof this.DF_ObjetParam[id]['Timer'] == 'number' && this.DF_ObjetParam[id]['Timer'] == 0))
		{
			DF_ObjetDefilant_On (id);
		}
		else
		{
			DF_ObjetNavigMous(id,'over');
		}
}
 
 
 
function DF_ObjetDefilant_On_Inverse (id)
{
	if(typeof this.DF_ObjetParam[id]['id_defile'] == 'undefined' || (typeof this.DF_ObjetParam[id]['Timer'] == 'number' && this.DF_ObjetParam[id]['Timer'] == 0))
		{
			DF_ObjetDefilant_On (id);
		}
		else
		{
			DF_ObjetSensInverse (id);
		}
}
 
 
 
function DF_ObjetDefilant_Inverse (id)
{
	if(typeof this.DF_ObjetParam[id]['Timer'] == 'number' && this.DF_ObjetParam[id]['Timer'] > 0)
		{
			DF_ObjetSensInverse (id);
		}
}
 
 
 
function addLoad_DF_ObjetDefilant(func) 
{
	if (window.addEventListener)
		{
			window.addEventListener("load", func, false);
		}
	else if (document.addEventListener)
		{
			document.addEventListener("load", func, false);
		}
	else if (window.attachEvent)
		{
			window.attachEvent("onload", func);
		}
}

Nouveau code source de la page d'exemple :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Générateur d'objets défilants www.abciweb.net</title>
<script type="text/javascript" src="http://www.abciweb.net/Scripts/objet-defilant.js"></script>
 
<script type="text/javascript">
<!--
// Chargement et paramétrage de la fonction
addLoad_DF_ObjetDefilant(function(){DF_ObjetDefilant('images_defilant','auto','r','g','8','0','0','500')});
 
// Pour un démarrage non automatique
addLoad_DF_ObjetDefilant(function(){DF_ObjetDefilant_Off('images_defilant')});
 
-->
</script>
 
 
 
<style type="text/css">
<!--
#cadre_images { 
	position: relative;
	border: 18px solid black;
	width:600px; 
	height:480px;
	margin: 2em auto 0 auto;
	overflow: hidden;
}
 
#conteneur_defilant {
position : relative;
overflow : hidden;
visibility:hidden;/*pour ie*/
height:100%;
}
 
#bouton_navig {
position:relative;
width:40px;
margin:auto; 
cursor:pointer;
z-index:10;
top:-18px
}
-->
</style>
</head>
 
<body>
 
 
<div id="cadre_images">
  <div id="conteneur_defilant">
  		<div id="images_defilant">
			<img src="http://www.abciweb.net/PHOTO/panorama_001.jpg" alt="source image : http://badplayer.free.fr/" title="source image : http://badplayer.free.fr/"  width="2134" height="480" />
		</div>
	</div>
</div>
 
 
<div id="bouton_navig" onclick = "DF_ObjetDefilant_On_Inverse('images_defilant')" onmouseover = "DF_ObjetDefilant_On('images_defilant')" onmouseout="DF_ObjetDefilant_Off('images_defilant')">
	<img src="http://www.abciweb.net/images_nav/fleche_aller_retour_violet.png" width="40" height="15" alt="" title="" />
</div>
 
</body>
</html>