 |
 Défilement horizontal paramétrable |
|
|
|
Connexion ratee
|
|
Le but de ce script est de créer sur une page une sorte de
prompteur horizontal, des textes ou des images, des liens qui défileront horizontalement,
la vitesse de passage, la direction, la largeur sont paramétrables. |
|
|
|
|
|
Ce script est un peu long dans la mesure ou il accepte de nombreux
paramètres mais le principe est simple.
Tout d'abord, on place dans la page un calque qui déterminera la largeur de la
fenêtre du navigateur, ce calque sera invisible.
On créé ensuite le calque qui défilera sur l'écran avec tout son
contenu (textes, images, liens...
Le script en lui-même accepte les paramètres suivants :
- la largeur sur laquelle s'effectue le défilement (en pourcentage de la largeur
de la page),
- le positionnement vertical du défilement (en pixels),
- la largeur du calque à faire défiler (en pixels),
- le sens du défilement (de gauche à droite ou de droite à gauche),
- l'espace entre chaque position intermédiaire du calque (en pixels),
- le temps d'attente entre chaque déplacement (en millisecondes).
La fonction lancé au chargement de la page commence par attribuer tous les
paramètres aux variables concernées puis détermine le sens du
défilement. Suivant ce dernier, elle lance l'une ou l'autre fonction de défilement
('defilement_gd()' ou 'defilement_dg()').
La fonction de défilement de gauche à droite :
Tant que le point haut-gauche du calque est inférieur à la largeur de la page plus une
marge (pour les ascenceurs), le calque est deplacé de la valeur d'un
'pas' puis la fonction est relancée dans le délai
passé en paramètre.
Lorsque le point haut-gauche du calque est au-delàs de la largeur de la page, le calque
est replacé à son point de départ et la fonction est de nouveau
relancée.
La fonction de défilement de droite à gauche est analogue sauf que le point de
replacement du calque est basé sur le point 0 (zéro) moins la largeur
déclarée du calque. |
|
|
|
|
|
dans la partie <head>
 |
|
 |
|
<script language="JavaScript">
// détection du navigateur
ns4 = (document.layers)? true:false;
ie4 = (document.all)? true:false;
// Largeur du défilement (en pourcentage de la page)
var taille = 100;
// L'espace entre chaque position
// Le temps entre chaque déplacement
// Largeur approximative du calque
var pas;
var vitesse;
var largeur;
// Largeur de l'écran (renseigné automatiquement)
var dispo = 30;
var position;
// Le point de départ en X du calque
var depart = 1;
// Données pour l'écriture de la cale (calcul de la largeur du défilement)
var espace = "<img src='' width='" + taille + "%' name='cale' height='1' border='0'>";
// Signification des arguments de la fonction :
// posy = le placement vertical du défilement (en pixels)
// larg = largeur approximative du calque à faire défiler (en pixels)
// dir = la direction du défilement : gd = de gauche à droite; dg = de droite à gauche
// dist = la distance entre chaque position du calque (en pixels)
// speed = le temps entre chaque déplacement (en millisecondes)
function defil(posy,larg,dir,dist,speed) {
// Positionnement vertical du défilement
if (ns4) {
document.banniere.top = posy;
// Largeur disponible sur la page
dispo += document.infos.document.cale.width;
}
if (ie4) {
banniere.style.top = posy;
// Largeur disponible sur la page
dispo += document.cale.width;
}
// On affecte les arguments passés à la la fonction
pas = dist;
vitesse = speed;
largeur = larg;
// Si de gauche à droite
if ( dir == 'gd') {
defilement_gd();
}
// Si de droite à gauche
if ( dir == 'dg' ) {
// Initialisation du défilement pour Netscape et Internet Explorer
if (ns4) {
document.banniere.width = largeur;
document.banniere.left = dispo;
depart = document.banniere.left;
}
if (ie4) {
banniere.style.width = largeur;
banniere.style.left = dispo;
position = banniere.style.left.substring(0,(banniere.style.left.length - 2));
position = parseInt(position,10);
}
defilement_dg();
}
}
// Fonction pour le défilement de gauche à droite
function defilement_gd() {
// Instructions pour Netscape
if (ns4) {
// Tant que le calque est visible à l'écran (à peu pres)
if ( document.banniere.left < dispo ) {
// Déplacement vers la droite de la valeur d'un 'pas'
document.banniere.left = depart + pas;
// On actualise la variable de position du calque pour le prochain tour
depart = document.banniere.left;
// On relance la fonction pour faire le déplacement suivant
setTimeout("defilement_gd()",vitesse);
}
// Quand le calque arrive au bout de la ligne on le replace au départ
else {
document.banniere.left = 1;
depart = 1;
// et on relance...
setTimeout("defilement_gd()",50);
}
}
// Instructions pour Internet Explorer
if (ie4) {
// On intercepte la position du calque
var position = banniere.style.left.substring(0,(banniere.style.left.length - 2));
position = parseInt(position,10);
// Tant que le calque est visible à l'écran (à peu pres)
if ( position < dispo ) {
// Déplacement vers la droite de la valeur d'un 'pas'
banniere.style.left = eval(position + pas);
// On actualise la variable de position du calque pour le prochain tour
depart = eval(position + pas);
// On relance la fonction pour faire le déplacement suivant
setTimeout("defilement_gd()",vitesse);
}
// Quand le calque arrive au bout de la ligne on le replace au départ
else {
banniere.style.left = 1;
depart = 1;
// et on relance...
setTimeout("defilement_gd()",50);
}
}
}
// Fonction pour le défilement de droite à gauche
function defilement_dg() {
if (ns4) {
if ( document.banniere.left > -largeur ) {
document.banniere.left = depart - pas;
depart = document.banniere.left;
setTimeout("defilement_dg()",vitesse);
}
else {
document.banniere.left = dispo;
depart = dispo;
setTimeout("defilement_dg()",50);
}
}
if (ie4) {
if ( position > -largeur ) {
banniere.style.left = eval(position - pas);
position = eval(position - pas);
setTimeout("defilement_dg()",vitesse);
}
else {
banniere.style.left = dispo;
position = dispo;
setTimeout("defilement_dg()",50);
}
}
}
</script>
|
|
|
 |
|
 |
dans la partie <body>
|
|
|
|
<body OnLoad="defil(200,50,'dg',15,200);">
<!-- Ecriture de la cale permettant de connaître la largeur de la fenêtre -->
<div name="infos" id="infos" style="position: absolute; visibility: hidden;">
<script language="JavaScript">document.write(espace);</script>
</div>
<!-- Calque à faire défiler -->
<div name="banniere" id="banniere" style="position: absolute; top: 0px; left: 0px; visibility: visible; z-index: 2;">
Bonjour <img src="images/logo.gif" id="logo" name="logo">
</div>
<!-- Contenu de la page -->
Contenu de la page...
|
|
|
|
|
|
|
|
|
|
|
|
|
