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

Ce site au démarrage

begin process at 2010 03 21 21:27:21

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 269 / 1 015

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

PRATIQUE DE SILVERLIGHT PAR ERIC AMBROSI par MPOWARE

APPRENDRE à DéVELOPPER POUR LES MOBILES AVEC LA NOUVELLE GéNéRATION .NET par odewit

ZUNE : NOUVELLE VERSION DU ZUNE SOFTWARE - V 4.2 par ROMELARD Fabrice

NOUVEAU SYSTèME D'AIDE POUR VISUAL STUDIO 2010 : POUR CEUX QUI N'APPRéCIENT PAS TROP L'ABSENCE D'INDEX... par coq

L'INTERFACE NATURELLE DE WINDOWS PHONE 7 SERIES par odewit

Forum

RE : PROBLEME BD LISTE par peter2010

RE : CONVERSION par peter2010

COMMENT RENDRE INVISIBLE L'AFFICHAGE DE LA SOURCE D'UNE PAGE D'UN SITE ? par odysseum13

RE : LECTEUR VIDEO FLASH + JAVASCRIPT par stonedbike

Côté IT

Offres d'emploi

Formations Video

Appels d'offres

Logiciels

Academy System (10.9.4.0)
ACADEMY SYSTEM (10.9.4.0)

Logiciel de gestion des établissements. - élèves/étudiants (inscription, dossier, absence...) -...

Cliquez pour télécharger Academy System
Xilisoft Convertisseur Vidéo Ultimate (5.1.39.0305)
XILISOFT CONVERTISSEUR VIDéO ULTIMATE (5.1.39.0305)

Xilisoft Convertisseur Vidéo Ultimate est un outil puissant de conversion vidéo, facile à utilise...

Cliquez pour télécharger Xilisoft Convertisseur Vidéo Ultimate
Xilisoft DVD Ripper Ultimate (5.0.64.0304)
XILISOFT DVD RIPPER ULTIMATE (5.0.64.0304)

Xilisoft DVD Ripper Ultimate est un logiciel excellent pour copier et convertir DVD vers presque ...

Cliquez pour télécharger Xilisoft DVD Ripper Ultimate
Axalot, logiciel de sauvegarde de données en ligne (1.10.108.1)
AXALOT, LOGICIEL DE SAUVEGARDE DE DONNéES EN LIGNE (1.10.108.1)

Perdre tout le contenu de votre disque dur, vous imaginez ? Vos photos, vos musiques, votre compt...

Cliquez pour télécharger Axalot, logiciel de sauvegarde de données en ligne
Rigs of Rods (63.3)
RIGS OF RODS (63.3)

c'est un jeu de multi-simulation camions,autobus voitures, avions, bateaux, hélicoptère avec défo...

Cliquez pour télécharger Rigs of Rods