Exemples & Sources en JavaScript Annuaire francophone du CGI Exemples & Sources en JavaScript
Accueil du site

Détection (3)
Divers (10)
Formulaire (11)
Image (5)
Navigation (3)

Les 10 derniers
Les plus vus

Infos sur JavaScript
Les mots réservés
Les événements
Les opérateurs

Archives

A propos du site
Le Forum du site

Linker Scripts-fr !

Faîtes un lien sur votre site

 

Valid HTML 4.01!
Valid CSS!

Actuellement 2 connectés

Bienvenue sur Scripts-fr.com

Scrolling vertical à vitesse variable


Exemple :

Ce javascript permet de faire défiller du texte contenus dans un bloc DIV en recevant des variables direction et vitesse.

Pour des raisons de construction du site, l'exemple ne peut être intégré à cette page.
Je l'ai donc intégré dans un Iframe. Si vous ne les lisez pas, vous le trouverez en pop-up en cliquant la. Si vous n'ouvrez ni les pop-up ni lisez les Iframes, je me demande ce que vous faite sur un site tel que celui ci ;-)


Explication du script : (a copier et à coller)

<html>
<head>
<title></title>

<script type="text/javascript">
<!-- Debut
// Original: Eddie Traversa (psych3@primus.com.au)
// Web Site: http://nirvana.media3.net
// JavaScript pris sur le site: "http://www.java.scripts-fr.com"

function verScroll(dir, spd, loop) {
loop = true;
direction = "up";
speed = 10;
scrolltimer = null;

/*
Nous commencons notre script en ouvrant notre fonction
verScroll qui recevra 3 arguments. dir est la direction, spd la vitesse et loop correspondant à la boucle (j'y reviendrais plus tard).
Puis nous fixons quelques variables.
*/

if (document.layers) {
var page = eval(document.elementTexte);
}
else {
if (document.getElementById) {
 var page= eval("document.getElementById('elementTexte').style");
 }
 else {
  if (document.all) {
  var page = eval(document.all.elementTexte.style);
   }
 }
}

/*
Içi nous allons détecter les différents DOM (Document Object Model) en fonction du navigateur du visiteurs (
layer => netscape4, getElementById => tous les navigateurs compatible DOM level2, all => internet explorer 5+). Cette opération, effectuée avec la méthode eval, va nous permettre de récuperer la valeur de l'élément elementTexte.
*/

direction = dir;
speed = parseInt(spd);
var y_pos = parseInt(page.top);

/*
Dans la variable
direction on met l'argument dir reçus a l'appel de la fonction.
Dans la variable
speed, on y met l'argument spd reçus à l'appel de la fonction. On utilise ici la méthode parseInt pour être sur que la valeur sera un entier.
Et enfin dans la variable
y_pos, on y met la valeur de top (de la déclaration du style de l'élement) de l'élement se trouvant dans la variable page.
*/

if (loop == true) {
/*
Nous ouvrons une condition avec l'instruction
if pour vérifier que la variable loop est bien strictement égale (vérifiée avec l'opérateurs de comparaison ==) à true. C'est cette variable qui nous permettra ou non de déclencher le défillement.
*/

  if (direction == "dn") {
   page.top = (y_pos - (speed));
   } else {

/*
Nous ouvrons une nouvelle condition permettant de vérifier que la variable
direction vaut bien dn (pour down, bas quoi).
Si c'est le cas, nous alons modifier la valeur du style
top en enlevant la valeur de speed à y_pos (souvenez vous, la position de l'élément par rapport au haut de la page) de notre élément contenu dans la variable page. Sinon...
*/

   if (direction == "up" && y_pos < 10) {
   page.top = (y_pos + (speed));
   } else {

/*
On ouvre une autre autre condition qui vérifie que la variable
direction vaut up ET que la variable y_pos est bien inféreure à 10 (pour arrêter le scrolling arrivé en haut). Cette opération est effectuée avec l'opérateur logique && (AND logique) ce qui rendra la condition vraie si et seulement si les 2 conditions sont vraie.
Donc si la condition est remplie, comme pour le down, on modifie la valeur de
top du style de notre élément mais cette fois ci en ajoutant la valeur de speed.
*/

    if (direction == "top") {
    page.top = 10;
    }
   }
}

/*
Aller zoup on aime ca, on ouvre encore une condition. Alors la on vérifie si la variable
direction vaut top. Si c'est le cas, on repositionne notre élément à 10px du haut (vous pouvez mettre la valeur que vous voulez hein...).
*/

scrolltimer = setTimeout("verScroll(direction,speed)", 1);
  }
}

/*
Ici nous créons une variable
scrolltimer qui contient la méthode de l'objet window setTimeout ayant pour fonction d'évaluer une expression (ici appelle de la fonction verScroll avec en argument les variables direction et speed) après qu'un délai en millisecondes (ici ) soit expiré.
*/

function stopScroll() {
loop = false;
clearTimeout(scrolltimer);
}

/*
On ouvre une seconde fonction qui nous met la variable
loop à false et avec la méthode clearTimeout on annule le délais de la méthode setTimeout.
*/

// -->
</script>

</head>
<body>

<div id="scrollmenu" style="position:absolute; width:200px; height:30px; z-index:1; left:320px; top: 60px">
<a href="#"
onMouseOver="verScroll('up','25','true')"
onMouseOut="stopScroll()"><<<</a>
<a href="#"
onMouseOver="verScroll('up','5','true')"
onMouseOut="stopScroll()"><<</a>
<a href="#"
onMouseOver="verScroll('up','1','true')"
onMouseOut="stopScroll()"><</a> |
<a href="#"
onMouseOver="verScroll('dn','1','true')"
onMouseOut="stopScroll()">></a>
<a href="#"
onMouseOver="verScroll('dn','5','true')"
onMouseOut="stopScroll()">>></a>
<a href="#"
onMouseOver="verScroll('dn','25','true')"
onMouseOut="stopScroll()">>>></a>
<br><a href="#"
onMouseOver="verScroll('top')"
onMouseOut="stopScroll()">Haut</a>
</div>

<div id="elementTexte" style="position:absolute;
width:300px; z-index:1; left: 10px; top: 15px">
Votre texte hyper long
</div>

</body>
</html>


© 2002 Java.Scripts-fr - Tous droits réservés - Design altiline.com - Hébergement eBusiness.be
Pour tout commentaire, n'hésitez pas à contacter le webmaster

Contact !