Bonsoir à toutes et à tous,
les boites glissantes ! Voici le code HTML :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>page glissante</title>
<script language="javascript" type="text/javascript" src="JS/Script.js"></script>
<link rel="stylesheet" type="text/css" href="CSS/Styles.css" />
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="CSS/Styles-IE.css" /
<![endif]-->
</head>
<body>
<!-------------------->
<!-- Boite Numéro 1 -->
<!-------------------->
<div id="boite1" class="commun">
<div class="cont">
<h1>Boite 1</h1>
<p>bla bla bla bla bla</p>
<p>bla bla bla bla bla</p>
<p>bla bla bla bla bla</p>
<p>bla bla bla bla bla</p>
<p>bla bla bla bla bla</p>
<p>bla bla bla bla bla</p>
</div>
</div>
<!-------------------->
<!-- Boite Numéro 2 -->
<!-------------------->
<div id="boite2" class="commun">
<div class="cont">
<h1>Boite 2</h1>
<p>bla bla bla bla bla</p>
</div>
</div>
<!-------------------->
<!-- Boite Numéro 3 -->
<!-------------------->
<div id="boite3" class="commun">
<div class="cont">
<h1>Boite 3</h1>
<p>bla bla bla bla bla</p>
</div>
</div>
<!-------------------->
<!-- Boite Numéro 4 -->
<!-------------------->
<div id="boite4" class="commun">
<div class="cont">
<h1>Boite 4</h1>
<p>bla bla bla bla bla</p>
</div>
</div>
<!-------------------->
<!-- Boite Numéro 5 -->
<!-------------------->
<div id="boite5" class="commun">
<div class="cont">
<h1>Boite 5</h1>
<p>bla bla bla bla bla</p>
</div>
</div>
<!-------------------->
<!-- Boite Numéro 6 -->
<!-------------------->
<div id="boite6" class="commun">
<div class="cont">
<h1>Boite 6</h1>
<p>bla bla bla bla bla</p>
</div>
</div>
<!-------------------->
<!-- Boite Numéro 7 -->
<!-------------------->
<div id="boite7" class="commun">
<div class="cont">
<h1>Boite 7</h1>
<p>bla bla bla bla bla</p>
</div>
</div>
<!-------------------->
<!-- Boite Numéro 8 -->
<!-------------------->
<div id="boite8" class="commun">
<div class="cont">
<h1>Boite 8</h1>
<p>bla bla bla bla bla</p>
</div>
</div>
<!-------------------->
<!-- Boite Numéro 9 -->
<!-------------------->
<div id="boite9" class="commun">
<div class="cont">
<h1>Boite 9</h1>
<p>bla bla bla bla bla</p>
</div>
</div>
<!------------------>
<!-- Menu Général -->
<!------------------>
<ul id="menu">
<li onclick="boite.deplace(1);">Boite 1</li>
<li onclick="boite.deplace(2);">Boite 2</li>
<li onclick="boite.deplace(3);">Boite 3</li>
<li onclick="boite.deplace(4);">Boite 4</li>
<li onclick="boite.deplace(5);">Boite 5</li>
<li onclick="boite.deplace(6);">Boite 6</li>
<li onclick="boite.deplace(7);">Boite 7</li>
<li onclick="boite.deplace(8);">Boite 8</li>
<li onclick="boite.deplace(9);">Boite 9</li>
</ul>
</body>
</html>
Voici le CSS :
* {
margin : 0;
border : none;
padding : 0;
}
html { overflow : hidden; }
body { background-color : grey; }
/*--------------------*/
/* Les Boites */
/*--------------------*/
#boite1 { background-color : red; }
#boite2 { background-color : green; }
#boite3 { background-color : lightblue; }
#boite4 { background-color : yellow; }
#boite5 { background-color : pink; }
#boite6 { background-color : lightyellow; }
#boite7 { background-color : skyblue; }
#boite8 { background-color : maroon;
color : white; }
#boite9 { background-color : white; }
.commun {
display : block;
float : left;
position : relative;
z-index : 1;
}
/*------------------------------------------------*/
/* Exemple de présentation dans une Boite */
/*------------------------------------------------*/
.cont {
position : absolute;
top : 25px;
left : 125px;
right : 25px;
bottom : 25px;
background-color : magenta;
}
.cont h1 {
text-align : center;
}
.cont p {
margin : 10px;
border : 3px solid black;
padding : 10px;
}
/*-------------------*/
/* Menu fixe */
/*-------------------*/
#menu {
background-color : transparent;
position : fixed;
top : 200px;
left : 0px;
font-size : 2em;
z-index : 2;
}
li {
background-color : blue;
list-style-type : none;
margin : 5px;
}
Voici le code CSS pour IE :
menu { position : absolute; }
Et enfin le code javascript :
/*======================================*/
/* Initialisation au Chargement */
/*======================================*/
window.onload = function ()
{
boite.init();
}
window.onresize = function ()
{
boite.init();
}
/********************************************/
/* */
/* Gestion de sous-pages Glissantes */
/* */
/********************************************/
var boite = {
/*==================================*/
/* paramètre de l'animation */
/*==================================*/
delay: null,
byStep: 100,
speed: 20,
mode: false, /* true : avec animation, false : sans animation */
/*=============================*/
/* Position des Boites */
/*=============================*/
precX: 0,
precY: 0,
suivX: 0,
suivY: 0,
/*========================*/
/* Initialisation */
/*========================*/
init: function ()
{
/*----------------------------------------*/
/* Largeur et Hauteur de la Boite */
/*----------------------------------------*/
if (typeof(window.innerHeight) == "number")
{
var ww = parseInt(window.innerWidth);
var hh = parseInt(window.innerHeight);
}
else
{
var ww = parseInt(window.screen.availWidth);
var hh = parseInt(window.screen.availHeight) - parseInt(window.screenTop);
}
/*-------------------------------------------------------------*/
/* on force la largeur et la hauteur du bloc conteneur */
/*-------------------------------------------------------------*/
var aa = ww * 3; // Trois boites par ligne
var bb = hh * 3; // Trois boites par colonne
window.document.body.style.width = "" + aa + "px";
window.document.body.style.height = "" + bb + "px";
/*-----------------------------------------------------------*/
/* on force la largeur et la hauteur de chaque boite */
/*-----------------------------------------------------------*/
var xx = document.getElementsByTagName("div");
for (var i=0; i<xx.length; i++)
{
if (xx.item(i).className == "commun")
{
xx.item(i).style.width = "" + ww + "px";
xx.item(i).style.height = "" + hh + "px";
}
}
/*------------------------------------------*/
/* on se positionne sur la "boite3" */
/*------------------------------------------*/
this.precX = document.getElementById("boite3").offsetLeft;
this.precY = document.getElementById("boite3").offsetTop;
window.scrollTo(this.precX, this.precY);
},
/*==================================*/
/* Animation du Déplacement */
/*==================================*/
anime: function ()
{
/*-----------------------------*/
/* Mode Sans Animation */
/*-----------------------------*/
if (this.mode)
{
window.scrollTo(this.suivX, this.suivY);
return;
}
/*----------------------------*/
/* Mode AvecAnimation */
/*----------------------------*/
var flagX = false;
var flagY = false;
/*-------------------------------*/
/* Ajustement Horizontal */
/*-------------------------------*/
var stepX = this.suivX - this.precX;
if (stepX > +this.byStep)
{
this.precX += this.byStep;
stepX = +this.byStep;
}
else
{
if (stepX < -this.byStep)
{
this.precX -= this.byStep;
stepX = -this.byStep;
}
else
{
this.precX = this.suivX;
flagX = true;
}
}
/*-----------------------------*/
/* Ajustement Vertical */
/*-----------------------------*/
var stepY = this.suivY - this.precY;
if (stepY > +this.byStep)
{
this.precY += this.byStep;
stepY = +this.byStep;
}
else
{
if (stepY < -this.byStep)
{
this.precY -= this.byStep;
stepY = -this.byStep;
}
else
{
this.precY = this.suivY;
flagY = true;
}
}
window.scrollBy(stepX, stepY);
/*------------------------------------*/
/* Poursuite de l'Animation ? */
/*------------------------------------*/
if ((flagX == true) && (flagY == true))
{
clearInterval(this.delay);
this.delay = null;
this.precX = this.suivX;
this.precY = this.suivY;
}
else
{
this.delay = setTimeout("boite.anime();", this.speed);
}
},
/*================================================*/
/* Déplacement vers une nouvelle position */
/*================================================*/
deplace: function (node)
{
var xx = document.getElementById("boite" + node.toString());
this.suivX = xx.offsetLeft;
this.suivY = xx.offsetTop;
this.anime();
}
};
@+
