CodeS-SourceS est hébergé par Frontier.fr

Ce site au démarrage

begin process at 2010 02 10 10:28:23

Accueil Codes Tutoriels Forum Livres Emploi Services Connexion

Trouver un code source :

dans

[ Dernières recherches ]

Accueil >

SCROLLING VERTICAL À VITESSE VARIABLE

Information sur la source

Note :

10,00 / 10

Catégorie :Navigation Niveau :Débutant Date de création :06/05/2005 Vu / téléchargé :9 210 / 1 011

Auteur : sp33dshark

Ecrire un message privé

Site perso

Commentaire sur cette source (1)

Ajouter un commentaire et/ou une note

Description

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

Source

<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>

<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>

Fichier Zip

Les Membres Club peuvent télécharger directement un fichier contenu dans le zip sans télécharger le zip en entier !

Scrolling vertical . vitesse variable.htm 14 735 octets

Télécharger le zip

Sources de la même categorie

EMULATION DE $_GET() DU PHP par jchan

ACCESSIBARRE - AMÉLIORER LE CONFORT DES PERSONNES NON-VOYANT... par Pfuch

CLASS BARRE DE DÉFILEMENT (SCROLLBAR) JAVASCRIPT par TheWeasel47

TAILLEFONTE par tiger222

MOTEUR DE RECHERCHE SANS PHP par jdmcreator

Toutes les sources de la catégorie Navigation

Commentaires et avis

Commentaire de dogma14 le 23/05/2007 13:53:05

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);
}
}

Ajouter un commentaire

Nos sponsors

Derniers Blogs

UNE JOLIE-HORLOGE ET PAS QU'UN PEU ! par neodante

TECHDAYS PARIS 2010 : CONNECTEZ VOS DONNéES à SHAREPOINT 2010 AVEC LES BUSINESS CONNECTIVITY SERVICES par ROMELARD Fabrice

[DIVERS] SUIVRE VOS SéRIES PRéFéRéS SUR LA TOILE par orion

TECHDAYS PARIS 2010 : LA BI DANS SHAREPOINT 2010 par ROMELARD Fabrice

TECHDAYS PARIS 2010 : DéPLOIEMENT DE NOUVELLES TECHNOLOGIES - RETOUR D'EXPéRIENCE PAR L'INFORMATIQUE DE MICROSOFT par ROMELARD Fabrice

Forum

RE : RéCUPERER LA TAILLE D'UN DIV par bumbo

RE : PROTOTYPE: PROBLèME AVEC "EVENT" par bumbo

RE : FONCTION RECHERCHE DATE par jeca

DEFINITION DE LA METHODE SETBORDER par nassim1987

RE : FONCTION RECHERCHE DATE par Eyeron

Côté IT

Offres d'emploi

Formations Video

Appels d'offres

PLATEFORME SUR L ESOTERISME VOYANCE - sans charte graphique
Budget : 3 500€
Joomla 15 module paiement adaptation composant cuisine
Budget : 250€
Integrateur web dans template
Budget : 500€

Logiciels

DB-MAIN (9.1.0)
DB-MAIN (9.1.0)

DB-MAIN is a data-modeling and data-architecture tool. It is designed to help developers and anal...

Cliquez pour télécharger DB-MAIN
Xilisoft DPG Convertisseur (5.1.37.0120)
XILISOFT DPG CONVERTISSEUR (5.1.37.0120)

Xilisoft DPG Convertisseur offre aux fans de Nintendo DS une bonne solution leur permettant de dé...

Cliquez pour télécharger Xilisoft DPG Convertisseur
GraphicsGale (2.01.01)
GRAPHICSGALE (2.01.01)

GraphicsGale est un logiciel de PixelArt avec de nombreuse fonctionnalités permettant de réalisé ...

Cliquez pour télécharger GraphicsGale
Architecte 3D (Platinum 2010)
ARCHITECTE 3D (PLATINUM 2010)

Architecte 3D Platinium vous permet de concevoir facilement les plans votre future maison, de l'é...

Cliquez pour télécharger Architecte 3D
TeamViewer 5 (TeamViewer 5)
TEAMVIEWER 5 (TEAMVIEWER 5)

Dépanner un ami,expliquer une manipulation devient un jeu d'enfant. Prise en main d'un autre ord...

Cliquez pour télécharger TeamViewer 5