Scrolling vertical à vitesse variable

Soyez le premier à donner votre avis sur cette source.

Vue 11 631 fois - Téléchargée 1 132 fois

Description

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

Source / Exemple :


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

<script type="text/javascript">
<!-- Debut 

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>

Codes Sources

A voir également

Ajouter un commentaire Commentaire
Messages postés
2
Date d'inscription
mardi 9 septembre 2003
Statut
Membre
Dernière intervention
23 mai 2007

pour ceux qui utilise les balises doctype, le scroller ne fonctionne pas ... j'ai modifier le code de la fonction "verScroll" et il fonctionne avec les doctype que voici ci-dessous:

function verScroll(dir, spd, loop) {
loop = true;
direction = "up";
speed = 10;
scrolltimer = null;
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);
}
direction = dir;
speed = parseInt(spd);
var y_pos = parseInt(page.top);
if (loop == true) {
if (direction "dn") page.top (y_pos - (speed)) + "px";
else {
if (direction "up" && y_pos < 10) page.top (y_pos + (speed)) + "px";
else if (direction "top") page.top 10;
}
scrolltimer = setTimeout("verScroll(direction,speed)", 1);
}
}

Vous n'êtes pas encore membre ?

inscrivez-vous, c'est gratuit et ça prend moins d'une minute !

Les membres obtiennent plus de réponses que les utilisateurs anonymes.

Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.

Le fait d'être membre vous permet d'avoir des options supplémentaires.