Menu défilant au passage de la souris

**drizztoli** · 26/11/2007, 10h46

Bonjour,

J'ai créé une sorte de menu defilant qui affiche un certain nombre d'item et qui montre le suivant et cache le dernier quand on passe la souris sur la fleche du bas ou celle du haut.

Mais je n'arrive pas à faire continuer le defilement tant que la souris est sur la flêche du bas ou du haut et des qu'on retire la souris, le défilement s'arrête. Je sais qu'il y a surement une histoire de timeout mais je n'arrive pas à le mettre en place.

Voici le code du menu actuel :

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
 
<html>
<head>
<script type="text/javascript">
 
var iNbItem = 24;
var iStart = 1;
var iEnd = 5;
 
function seeMore ()
{
 
	if (iStart >= 1)
		document.getElementById ('item_haut').style.display = "block";
 
 
	if (iEnd >= iNbItem-1)
		document.getElementById ('item_bas').style.display = "none";	
 
 
	iEnd++;
	document.getElementById ('item_'+iEnd).style.display = "block";
	document.getElementById ('item_'+iStart).style.display = "none";
	iStart++;
 
 
}
 
function seeLess ()
{
 
	if (iStart == 2)
		document.getElementById ('item_haut').style.display = "none";
 
	if (iEnd == iNbItem)
		document.getElementById ('item_bas').style.display = "block";
 
	iStart--;
	document.getElementById ('item_'+iStart).style.display = "block";
	document.getElementById ('item_'+iEnd).style.display = "none";
	iEnd--;
 
}
 
</script>
</head>
 
<body>
<ul>
 
<li style="display:none;" id="item_haut"><a href="#" onclick="Javascript:seeLess();" onmouseOver="Javascript:seeLess();">Fleche vers le haut</a></li>
 
<li style="display:block;" id="item_1" >Item 1 </li>
<li style="display:block;" id="item_2" >Item 2 </li>
<li style="display:block;" id="item_3" >Item 3 </li>
<li style="display:block;" id="item_4" >Item 4 </li>
<li style="display:block;" id="item_5" >Item 5 </li>
<li style="display:none; " id="item_6" >Item 6 </li>
<li style="display:none; " id="item_7" >Item 7 </li>
<li style="display:none; " id="item_8" >Item 8 </li>
<li style="display:none; " id="item_9" >Item 9 </li>
<li style="display:none; " id="item_10">Item 10</li>
<li style="display:none; " id="item_11">Item 11</li>
<li style="display:none; " id="item_12">Item 12</li>
<li style="display:none; " id="item_13">Item 13</li>
<li style="display:none; " id="item_14">Item 14</li>
<li style="display:none; " id="item_15">Item 15</li>
<li style="display:none; " id="item_16">Item 16</li>
<li style="display:none; " id="item_17">Item 17</li>
<li style="display:none; " id="item_18">Item 18</li>
<li style="display:none; " id="item_19">Item 19</li>
<li style="display:none; " id="item_20">Item 20</li>
<li style="display:none; " id="item_21">Item 21</li>
<li style="display:none; " id="item_22">Item 22</li>
<li style="display:none; " id="item_23">Item 23</li>
<li style="display:none; " id="item_24">Item 24</li>
 
 
<li style="display:block;" id="item_bas"><a href="#" onClick="Javascript:seeMore();" onmouseOver="Javascript:seeMore();">Fleche vers le bas</a></li>
</ul>
 
</body>
</html>

Merci pour votre aide...

**bigboomshakala** · 26/11/2007, 13h31

salut

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
 
<html>
<head>
<script type="text/javascript">
 
var iNbItem = 24;
var iStart = 1;
var iEnd = 5;
 
var timer1 = null;
var timer2 = null;
 
function seeMore ()
{
 
	if (iStart >= 1)
		document.getElementById ('item_haut').style.display = "block";
 
 
	if (iEnd >= iNbItem-1)
		document.getElementById ('item_bas').style.display = "none";	
 
 
	iEnd++;
	document.getElementById ('item_'+iEnd).style.display = "block";
	document.getElementById ('item_'+iStart).style.display = "none";
	iStart++;
 
 
}
 
function seeMore2()
{
	seeMore();
	timer1 = setTimeout('seeMore2()',300);
} 
 
function stopMore()
{
	clearTimeout(timer1);
}
 
function seeLess ()
{
 
	if (iStart == 2)
		document.getElementById ('item_haut').style.display = "none";
 
	if (iEnd == iNbItem)
		document.getElementById ('item_bas').style.display = "block";
 
	iStart--;
	document.getElementById ('item_'+iStart).style.display = "block";
	document.getElementById ('item_'+iEnd).style.display = "none";
	iEnd--;
 
}
 
function seeLess2()
{
	seeLess();
	timer2 = setTimeout('seeLess2()',300);
} 
 
function stopLess()
{
	clearTimeout(timer2);
}
 
</script>
</head>
 
<body>
<ul>
 
<li style="display:none;" id="item_haut"><a href="#" onmouseOver="seeLess2();" onmouseOut="stopLess()">Fleche vers le haut</a></li>
 
<li style="display:block;" id="item_1" >Item 1 </li>
<li style="display:block;" id="item_2" >Item 2 </li>
<li style="display:block;" id="item_3" >Item 3 </li>
<li style="display:block;" id="item_4" >Item 4 </li>
<li style="display:block;" id="item_5" >Item 5 </li>
<li style="display:none; " id="item_6" >Item 6 </li>
<li style="display:none; " id="item_7" >Item 7 </li>
<li style="display:none; " id="item_8" >Item 8 </li>
<li style="display:none; " id="item_9" >Item 9 </li>
<li style="display:none; " id="item_10">Item 10</li>
<li style="display:none; " id="item_11">Item 11</li>
<li style="display:none; " id="item_12">Item 12</li>
<li style="display:none; " id="item_13">Item 13</li>
<li style="display:none; " id="item_14">Item 14</li>
<li style="display:none; " id="item_15">Item 15</li>
<li style="display:none; " id="item_16">Item 16</li>
<li style="display:none; " id="item_17">Item 17</li>
<li style="display:none; " id="item_18">Item 18</li>
<li style="display:none; " id="item_19">Item 19</li>
<li style="display:none; " id="item_20">Item 20</li>
<li style="display:none; " id="item_21">Item 21</li>
<li style="display:none; " id="item_22">Item 22</li>
<li style="display:none; " id="item_23">Item 23</li>
<li style="display:none; " id="item_24">Item 24</li>
 
 
<li style="display:block;" id="item_bas"><a href="#" onmouseOver="seeMore2();" onmouseOut="stopMore()">Fleche vers le bas</a></li>
</ul>
 
</body>
</html>

**calitom** · 26/11/2007, 13h34

Envoyé par bigboomshakala

salut

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
 
<html>
<head>
<script type="text/javascript">
 
var iNbItem = 24;
var iStart = 1;
var iEnd = 5;
 
var timer1 = null;
var timer2 = null;
 
function seeMore ()
{
 
	if (iStart >= 1)
		document.getElementById ('item_haut').style.display = "block";
 
 
	if (iEnd >= iNbItem-1)
		document.getElementById ('item_bas').style.display = "none";	
 
 
	iEnd++;
	document.getElementById ('item_'+iEnd).style.display = "block";
	document.getElementById ('item_'+iStart).style.display = "none";
	iStart++;
 
 
}
 
function seeMore2()
{
	seeMore();
	timer1 = setTimeout('seeMore2()',300);
} 
 
function stopMore()
{
	clearTimeout(timer1);
}
 
function seeLess ()
{
 
	if (iStart == 2)
		document.getElementById ('item_haut').style.display = "none";
 
	if (iEnd == iNbItem)
		document.getElementById ('item_bas').style.display = "block";
 
	iStart--;
	document.getElementById ('item_'+iStart).style.display = "block";
	document.getElementById ('item_'+iEnd).style.display = "none";
	iEnd--;
 
}
 
function seeLess2()
{
	seeLess();
	timer2 = setTimeout('seeLess2()',300);
} 
 
function stopLess()
{
	clearTimeout(timer2);
}
 
</script>
</head>
 
<body>
<ul>
 
<li style="display:none;" id="item_haut"><a href="#" onmouseOver="seeLess2();" onmouseOut="stopLess()">Fleche vers le haut</a></li>
 
<li style="display:block;" id="item_1" >Item 1 </li>
<li style="display:block;" id="item_2" >Item 2 </li>
<li style="display:block;" id="item_3" >Item 3 </li>
<li style="display:block;" id="item_4" >Item 4 </li>
<li style="display:block;" id="item_5" >Item 5 </li>
<li style="display:none; " id="item_6" >Item 6 </li>
<li style="display:none; " id="item_7" >Item 7 </li>
<li style="display:none; " id="item_8" >Item 8 </li>
<li style="display:none; " id="item_9" >Item 9 </li>
<li style="display:none; " id="item_10">Item 10</li>
<li style="display:none; " id="item_11">Item 11</li>
<li style="display:none; " id="item_12">Item 12</li>
<li style="display:none; " id="item_13">Item 13</li>
<li style="display:none; " id="item_14">Item 14</li>
<li style="display:none; " id="item_15">Item 15</li>
<li style="display:none; " id="item_16">Item 16</li>
<li style="display:none; " id="item_17">Item 17</li>
<li style="display:none; " id="item_18">Item 18</li>
<li style="display:none; " id="item_19">Item 19</li>
<li style="display:none; " id="item_20">Item 20</li>
<li style="display:none; " id="item_21">Item 21</li>
<li style="display:none; " id="item_22">Item 22</li>
<li style="display:none; " id="item_23">Item 23</li>
<li style="display:none; " id="item_24">Item 24</li>
 
 
<li style="display:block;" id="item_bas"><a href="#" onmouseOver="seeMore2();" onmouseOut="stopMore()">Fleche vers le bas</a></li>
</ul>
 
</body>
</html>

Ou sinon comme ca, c'est encore mieux!

**calitom** · 26/11/2007, 13h33

Peut etre comme ca:

-tu fais passer une variable à 1 sur le onMouseOver de Fleche Haut
-tu fais passer la variable à 0 sur onMouseOut de Fleche Haut
-a la fin de seeMore tu regarde si cette variable est à 1 si oui tu relance seeMore, et sinon tu stop

Et idem pour Fleche Bas et seeLess...

**drizztoli** · 26/11/2007, 13h40

Merci bigboomshakala, ca marche imppec!

Il me manquait donc cette petite fonction "clear timeout" !!

Menu défilant au passage de la souris

JavaScript

Vue hybride

Discussions similaires

Partager

Partager