Menu défilant verticalement
Bonjour à tous,
Je dois réaliser un menu défilant verticalement en Javascript. Ce menu est composé de logos, qui doivent défiler de bas en haut. Le principe est que quand un logo arrivé en haut n'est plus visible ((logo.style.top + logo.clientHeight) < conteneur.style.top ), il doit être repositionné à la fin, après le dernier élément.
J'ai réalisé le code suivant:
Code:
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
| <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>
Test menu défilant
</title>
<style type="text/css">
img {
border: none;
}
.menuItem {
position: relative;
top: auto;
margin-top: 2px;
margin-bottom: 2px;
visibility: visible;
}
#container {
background-image: url(bg_logoDefil.gif);
background-repeat: no-repeat;
background-position: center;
width: 200px;
height: 360px;
}
#menu {
overflow: hidden;
position: relative;
left: 8px;
top: 0px;
width: 200px;
height: 360px;
}
</style>
<script type="text/javascript">
var timer = null;
var shift = 1;
var timeToWait = 20;
function init() {
var menu = document.getElementById("menu");
// Sous Firefox, les sauts de ligne sont considérés comme des noeuds enfants. La boucle ci-dessous les supprime
for(var i = 0; i < menu.childNodes.length; i++) {
if(menu.childNodes[i].nodeName.indexOf("DIV") == -1) {
menu.removeChild(menu.childNodes[i]);
}
}
// Lancement du menu défilant
setTimeout(function() { scroll() }, 1000);
}
function getTop(item) {
var top = item.style.top;
if(top == null) {
top = 0;
} else if(top.indexOf("px") != -1) {
top = top.substring(0, top.indexOf("px"));
} else if(top.indexOf("auto") != -1) {
top = item.offsetTop;
}
return top;
}
function isVisible(item) {
var posY = getTop(item);
var height = item.clientHeight;
var tmp = parseInt(posY) + parseInt(height);
var visible = true;
if(tmp < -2) {
visible = false;
}
return visible;
}
function scroll() {
var menu = document.getElementById("menu");
var last = null;
var toHide = null;
var toAdd = null
for(var i = 0; i < menu.childNodes.length; i++) {
var item = menu.childNodes[i];
if(!isVisible(item)) {
last = menu.lastChild;
toHide = item;
toAdd = item.cloneNode(true);
break;
} else {
var posY = getTop(item);
var newPosY;
newPosY = posY - parseInt(shift);
item.style.top = newPosY + "px";
}
}
// Si un élément n'est plus visible
if(toHide != null) {
var lastPosY = last.offsetTop;
menu.removeChild(toHide);
menu.appendChild(toAdd);
toAdd.style.visibility = "hidden";
toAdd.style.top = (parseInt(lastPosY) + parseInt(last.clientHeight)) + "px";
}
timer = setTimeout(function() { scroll() }, timeToWait);
}
window.onload = function() {
init();
};
</script>
</head>
<body>
<div id="container">
<div id="menu">
<div class="menuItem" id="menuItem1">
<a href="#">
<img src="logo1.gif" />
</a>
</div>
<div class="menuItem" id="menuItem2">
<a href="#">
<img src="logo2.gif" />
</a>
</div>
<!-- ... -->
</div>
</div>
</body>
</html> |
Malheureusement, le résultat est assez improbable :? Je ne comprend pas d'où cela peut venir, je m'arrache les cheveux là-dessus depuis 2, 3 jours...
Si quelqu'un parmi vous a une idée pour que tout ça fonctionne correctement, je suis fortement intéressé ;) D'avance merci !
