script avec défilement vertical

**mdr_cedrick** · 19/01/2009, 09h28

Bonjour à tous

je post ici ne sachant pas trop où faire ma demande

je fais des recherches depuis ce matin et je ne trouve rien d'intéressant par rapport à ma recherche alors je viens vous demander si vous connaissez quelque chose dans ce genre.

j'ai des nouveautés (en réalité des screen de sites web) que je veux faire défiler verticalement (de bas en haut).
Or je ne veux pas un défilement continu. Une fois ma nouveauté apparue j'aimerai qu'elle se stop quelques instants pour qu'on puisse la regarder, puis elle disparait pour laisser la suivante arriver.
De plus lorsqu'une nouveauté est affichée, si l'on passe le curseur dessus j'aimerais qu'elle ne disparaisse pas tant qu'on a pas effectué le onmouseout

si vous connaissez ou avez déjà utilisé un script plus ou moins similaire je suis preneur

juste pour info j'utilise déjà jQuery pour d'autres chose mais ça n'utilise pas vraiment le comportement que je veux.

merci de votre aide

**marcha** · 19/01/2009, 09h42

Salut,

Voici un script qui doit être assez proche de ton besoin, je te laisse
regarder et poser des questions si tu as de la peine à l'adapter

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
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Document sans nom</title>
<style type="text/css">
#newsbox { width: 200px; height: 200px; border: 1px solid black; position: relative; overflow: hidden; }
#newslist { position: absolute; padding: 0 0.5em; }
</style>
<script language="javascript" type="text/javascript">
 
var pos;
var speed = 1;
var pos_initial;
 
function startAnim() {
	var e = document.getElementById('newsbox');
	pos_initial = e.clientHeight + 10;
	pos = pos_initial;
	setInterval('anim()', 20);
}
function anim() {
	var e = document.getElementById('newslist');
	e.style.visibility = 'visible';
	e.style.top = Math.floor(pos) + 'px';
	pos = pos - speed;
	if(pos < -e.clientHeight) pos = pos_initial;
}
window.onload = function() {
  var e = document.getElementById('newsbox');
  e.onmouseover = function() { speed = 0; };
  e.onmouseout = function() { speed = 1; };
  startAnim()
};
</script>
</head>
 
<body>
<div id='newsbox'>
  <div id='newslist' style='visibility: hidden'>
    <h1>Titre 1</h1>
	<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in </p>
    <h1>Titre 1</h1>
	<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in </p>
	<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in </p>
    <h1>Titre 1</h1>
	<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in </p>
  </div>
</div>
</body>
</html>

**mdr_cedrick** · 19/01/2009, 11h26

merci beaucoup marcha
c'est exactement le comportement que je recherche, à une chose près c'est que j'aimerai que quand "titre 1" arrive en haut du <div> il se stop quelques secondes de manière à voir la chose (à savoir que pour moi le texte sera remplacé par une image)

**marcha** · 19/01/2009, 11h34

Salut,

dans la fonction anim tu peux faire un test sur la variable pos
et modifier speed à 0 quand le décalage correspond à la hauteur
de ton image. puis tu lance un setTimeout sur une fonction qui
remettra speed à 1 après le délai souhaité

**mdr_cedrick** · 19/01/2009, 16h18

j'ai pu obtenir ce que je voulais grâce à ton aide

à la seule chose près que j'aimerai que chaque image se stop or je n'ai que la première
car j'ai l'impression que le contenu du div est considéré comme un tout et non pas comme des éléments séparés

**marcha** · 19/01/2009, 16h55

Salut,

Je crois que tu es sur la bonne voie. A mon avis
c'est juste pos % multiple

J'ai toujours une crainte sur l'utilisation du modulo
avec des nombre négatifs. Essaye éventuellement (-pos) % multiple
ou alors avec Math.abs()

**SanjeeOnP** · 16/06/2009, 12h57

Bonjour,

Envoyé par mdr_cedrick

merci beaucoup marcha
c'est exactement le comportement que je recherche, à une chose près c'est que j'aimerai que quand "titre 1" arrive en haut du <div> il se stop quelques secondes de manière à voir la chose (à savoir que pour moi le texte sera remplacé par une image)

Je cherche à avoir la même chose.
Je débute en jquery et je n'arrive pas à retranscrire vos conseils en JS.
Quelqu'un peut m'aider?

Merci

**artkap** · 17/03/2010, 17h19

J'aurais la même demande que Dalton :
Y aurais-t-il un moyen d'obtenir un enchaînement sans aucun blanc ?

Merci.

**marcha** · 18/03/2010, 08h37

Salut,

oui, mais il faut 2 copies du contenu défilant.
quand la copie 1 a entièrement disparu de la zone
visible (la copie 2 est donc visible) il faut déplacer
la copie 1 après la copie 2 dans le DOM.

faire de même avec la copie 2 une fois qu'elle n'est
plus visible, etc...

**dalton31** · 11/03/2009, 17h43

Bonjour,

Ce script me conviendrait parfaitement.
Cependant, il faut attendre que l'intégralité du texte ait fini de défiler et disparaisse par le haut avant que le début du texte ne réaparaisse par le bas.
Comme j'envisage une zone de défilement relativement haute, j'aurais souhaité un enchaînement plus rapide.
J'ai modifié les valeurs de la ligne if(pos < -e.clientHeight) pos = pos_initial;
mais cela ne me satisfait pas complètement.
Y'a t'il un moyen d'obtenir un enchaînement sans aucun blanc ?

Merci par avance de votre aide.

Cordialement,

Cédric

**marcha** · 12/03/2009, 08h40

Salut dalton31, et bienvenu sur le forum.

Pour éviter le blanc, c'est possible, mais ça se complique. Il faut travailler
avec deux blocs (clones) placé l'un en dessous de l'autre.

quand un bloc a complètement disparu, il faut le déplacer en dessous de
celui qui est en cours d'affichage et ainsi de suite.

**zyongh** · 17/03/2009, 20h40

Super l'exemple, dommage qu'il ne fonctionne pas sous Firefox. Je ne pas Opera sur le PC que je squatte donc je n'ai pas pu tester.

En tout cas sous IE, c'est cool.

script avec défilement vertical

jQuery

Vue hybride

Discussions similaires

Partager

Partager