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
|
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title>Test de menu coulissant</title>
<style type="text/css">
.div1 {
width : 300px;
height: 400px;
border: thin solid red;
overflow: hidden;
}
.bq1 {
width : 100%;
height : 100%;
border: thin dashed black;
}
.bq2 {
width : 100%;
height : 100%;
border: thin dashed black;
}
.tab1 {
width : 595px;
height : 50px;
border: none;
}
</style>
<script type="text/javascript">
<!--
var scrolltimeid; /* ID du compteur */
var scrollspeed = 15; /* Vitesse en pixel du déplacement */
var scrollrefresh = 25; /* Temps mis entre chaque déplacement [ms] */
var pixel2scroll = 295; /* Déplacement total en pixel */
var pixelscrolled = 0; /* Nombre de pixel déjà déplacé (ne pas toucher) */
/* Fonction de déplacement */
function scroll(i)
{
if (!i)
{
var i=1;
document.getElementsByName("but1")[0].disabled = true;
}
// Vitesse normal au début
if ((i*scrollspeed) <= (pixel2scroll-scrollspeed*2))
{
pixelscrolled = pixelscrolled-(scrollspeed);
}
else /* Vitesse plus lente pour la fin */
{
pixelscrolled = pixelscrolled-(Math.ceil(scrollspeed/3));
}
// Débug dans le div console en bas
document.getElementById("console").innerHTML = pixelscrolled;
// Déplacement du tableau selon les paramétres
document.getElementsByName("tab1")[0].style.marginLeft = pixelscrolled+'px';
// S'arrête dès que le placement est bon
if (-pixelscrolled <= pixel2scroll)
{
scrolltimeid = setTimeout(function() { scroll((i+1)) }, scrollrefresh);
} /* Profite de détruire le timer */
else
{
i = "";
pixelscrolled = 0;
clearTimeout(scrolltimeid);
scrolltimeid = "";
document.getElementsByName("but1")[0].disabled = false;
}
}
-->
</script>
</head>
<body>
<div id="div1" class="div1">
<table cellspacing="0" cellpadding="10" name="tab1" id="tab1" border="0">
<tr>
<td>
<div id="bq1" class="bq1">
blabla1 blabla1
</div>
</td>
<td>
<div id="bq2" class="bq2">
blabla2 blabla2
</div>
</td>
</tr>
</table>
<br />
</div>
<form action="#" id="form1">
<div>
<input onclick="scroll();" name="but1" type="button" value="Scroll" />
</div>
</form>
<div id="console">Console</div>
</body>
</html> |
