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

Ce site au démarrage

begin process at 2012 02 05 23:53:06

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é :10 417 / 1 069

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

ANTI-ROBOTS V 1.0 par MacGaliver

PRÉSENTOIR PAGE/SUJET par tiranus

NAVIGATEUR INTERNET HAVRET par HAVRETos

WMANAGER.JS : GÉRER LES FICHIERS WMA AVEC WINDOWS MEDIA PLAY... par jdmcreator

NAVIGATION PAR AJAX, CHARGEMENT DES PAGES SANS RECHARGEMENT par zulrigh

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

CSS CONTENT STATE SELECTORS (PERSONNAL DRAFT) par FREMYCOMPANY

MBA : POURQUOI FAIRE ET COMMENT LE CHOISIR ? par ROMELARD Fabrice

Y'A DES ERREURS QUI PEUVENT RENDRE LE DéVELOPPEUR VIOLENT par Aleks

[HYPER-V 3] PRéSENTATION DES COMMANDLETS POWERSHELL par Pierrick CATRO-BROUILLET

IIS7 - COMPRESSION GZIP par cyril

Forum

METTRE L'ARRIERE PLAN DE SITE WEB CHANGEABLE par hassen87

RE : AFFICHER UN IFRAME SELON UN SELECT par pascalito92140

RE : VéRIFICATION FORMULAIRE par jmeunier

RE : AFFICHER UN TABLEAU CACHé SUR UNE IMAGE par Julien39

COPIER / COLLER JAVASCRIPT PHP par fregeal

Côté IT

Offres d'emploi

Formations Video

Appels d'offres

Cherche referenceur astucieux
Budget : 1 500€
Recherche expert advisor sous mql4 hedging
Budget : 200€
Creation boutique en ligne iphone- android - Republication.
Budget : 4 000€

Logiciels

Academy System (17.2.1.0)
ACADEMY SYSTEM (17.2.1.0)

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

Cliquez pour télécharger Academy System
Easy-Planning (1.0.0.1)
EASY-PLANNING (1.0.0.1)

Basé sur les mêmes principes que MyPlanning, Easy-Planning permet de créer des plannings sous la ...

Cliquez pour télécharger Easy-Planning
COLLECTOR PLUS (3.00B)
COLLECTOR PLUS (3.00B)

COLLECTOR PLUS version 3.00B est un logiciel utilisant une base de données alimentée par : - L...

Cliquez pour télécharger COLLECTOR PLUS
PONAMEDIA PREMIUM - HELLLOOO FLASH DEMO (V7.4)
PONAMEDIA PREMIUM - HELLLOOO FLASH DEMO (V7.4)

PONAMEDIA TV DEVIENS HELLLOOO FLASH LA TV SUR VOTRE ORDINATEUR. Toute une plateforme Multi...

Cliquez pour télécharger PONAMEDIA PREMIUM - HELLLOOO FLASH DEMO
LettresFaciles 2011 (8.0.0.1)
LETTRESFACILES 2011 (8.0.0.1)

LettresFaciles est un logiciel facilitant la création et la rédaction de lettres types. Son inte...

Cliquez pour télécharger LettresFaciles 2011