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> |
Partager