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
| <!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Document sans nom</title>
<script language="javascript" type="text/javascript">
var Timer;
var Pas = 3;
function moveLayer(Sens) {
Objet=document.getElementById("contenu");
/*alert("Objet.offsetWidth="+Objet.offsetWidth+" et support.offsetWidth= "+document.getElementById("support").offsetWidth);
alert(parseInt(Objet.style.left) + (Pas*Sens));*/
if(parseInt(Objet.style.left) + (Pas*Sens)>0) {
clearTimeout(Timer);
}
else if(parseInt(Objet.style.left) + (Pas*Sens)<-(Objet.offsetWidth-document.getElementById("support").offsetWidth)) {
clearTimeout(Timer);
}
else {
Objet.style.left = (parseInt(Objet.style.left) + (Pas*Sens)) + "px";
}
Timer = setTimeout("moveLayer(" + Sens + ");", 30);
}
</script>
</head>
<body>
<div style="height:50px; overflow:auto; background-color:#ccc; border:1px solid gray">
<div id="support" style="position:relative; background-color:#CCCCCC; width:100px; height:140px; overflow:hidden; border:1px solid #000; left:0">
<div id="contenu" style="position:absolute; top:0; left:0; width:120px; border:1px solid gray;" >
DEBUT<br />ligne1<br />ligne2<br />ligne3<br />ligne4<br />ligne5<br />ligne6<br />
ligne7<br />ligne8<br />ligne9<br />ligne10<br />ligne11<br />ligne12<br />ligne13<br />
ligne14<br />ligne15<br />ligne16<br />ligne17<br />ligne18<br />ligne19<br />FIN<br />
</div>
<div style="background-color:#0F0; width:22px; height:140px; position:absolute; right:0; border-left:1px solid #000;">
<img onmouseover="moveLayer(1);" onmouseout="clearTimeout(Timer);" src="slideup.png" style="cursor:pointer; position:absolute; right:0;" alt="" />
<img onmouseover="moveLayer(-1);" onmouseout="clearTimeout(Timer);" src="slidedown.png" style="cursor:pointer; position:absolute; right:0; bottom:0;" alt="" />
</div>
</div>
</div>
</body>
</html> |
Partager