Accueil > > > DEFILEMENT OU SCROLL HORIZONTAL AUTREMENT FAIT AUTOMATIQUE ET MANUEL AVEC COMMANDES
DEFILEMENT OU SCROLL HORIZONTAL AUTREMENT FAIT AUTOMATIQUE ET MANUEL AVEC COMMANDES
Information sur la source
Description
Avec ce code pratique vous pouvez plus que faire défiler d'une autre manière les donnés horizontalement dans les deux sens droite et gauche, manoeuvrer et inverser le sens de rotation ou arrêter le défilement au survol de la souris, avec la possibilité d'afficher la barre de défilement et de la faire disparaitre pour laisser l'environnement des donnés claire et propre. Le code est fonctionnel en plus il est tes court et il été conçu pour qu'il soit facile à paramétrer. Une démonstration est disponible sur deux pages, l'adresse est notée ci dessous. Placez le ou vous voulez sur la page il marche toujours bien, car le survol de la souris est adapté pour détecter automatiquement l'endroit exacte de l'afficheur. Remarque : Affichez la barre de défilement sur le model de démonstration et observez sa réaction.!!!! Pour afficher le model de démonstration en ligne allez à cette adresse : http://intersite.site.voila.fr/sources.htm
Source
- <script type="text/javascript">
- <!--//
- var L_T = 1600 ; //--// La largeur totale du table des donnés
- var D_H = 117 ; //--// La Hauteur du div Afficheur
- var D_V = 300 ; //--// La largeur du div Afficheur, Attention si vous changez cette valeur vous devez modifier (M_G) et (M_D) ci-dessous
- //--// Autrement dit ici nous avons 125 + 175 = 300, Ce qui nous donne la largeur totale du div Afficheur et une marge de pause : 175 – 125 = 50
- var M_G = 125 ; //--// La marge gauche pour l'inversion à droite
- var M_D = 175 ; //--// La marge droite pour l'inversion à gauche
- var Z_Z =- (L_T-D_V); //--// c'est la limite droite
- document.write('<style type="text/css">#ho_riz{border: 1px solid #CCCCCC;'+
- 'background-color: ; width:'+D_V+'; height:'+D_H+'; overflow:hidden; z-index: 10}'+
- '.td-vh1{BORDER-RIGHT: #c0c0c0 1px dashed; BORDER-TOP: #c0c0c0 0px dashed; BORDER-LEFT: #c0c0c0 0px dashed; BORDER-BOTTOM: #c0c0c0 0px dashed;}'+
- '.tab_vh1{font-size: 9pt; font-family: Arial; width:'+L_T+'px;}</style>');
- var timer;
- function dr_oite() { //--// aller on va à droite
- /* Pour pouvoir utiliser ce code à titre personnel ne pas supprimer les lignes du commentaire ci-dessous.
- (c) : abdelaziz rejeb Elalia 7016 Tunisie
- site : http://abdelaziz.site.voila.fr
- pour tout contact: http://intersite.site.voila.fr
- Le 27/03/2009
- */
- S_V=1
- document.getElementById("menus").style.marginLeft =Z_Z++
- timer=setTimeout('dr_oite();',1);
- if(Z_Z==0){clearInterval(timer);gau_che()}
- }
- function gau_che() { //--// et on va à gauche
- S_V=2
- document.getElementById("menus").style.marginLeft =Z_Z--
- timer=setTimeout('gau_che();',1);
- if(Z_Z==(-(L_T-D_V)+1)){clearInterval(timer),dr_oite()}
- }
- function sur_vol() { // réaction à la sortie du curseur
- if(S_V==2)
- {
- clearInterval(timer),gau_che();
- }
- else
- {
- clearInterval(timer),dr_oite();
- }
- }
- //--// Les commandes de droite à gauche
- var f=0;
- function in_verseur(){
- mouse_x = 0;
- mouse_y = 0;
- document.getElementById("ho_riz").onmousemove = position;
- }
- function position(evt){
- if(!evt) evt = window.event;
- mouse_x = evt.clientX;
- mouse_y = evt.clientY;
- if(mouse_x<(f+M_G)){clearInterval(timer),dr_oite()} //--// vers la droite
- if(mouse_x>(f+M_D)){clearInterval(timer),gau_che()} //--// vers la gauche
- if(mouse_x>(f+M_G) && mouse_x<(f+M_D)){clearInterval(timer)} //--// position de pause
- }
- function B_TN(NUM){ //--// commandes de la barre de défilement
- if (NUM==4){document.getElementById('ho_riz').style.overflow='auto'};
- if (NUM==5){document.getElementById('ho_riz').style.overflow='hidden'};
- }
- //--// position horizontale du div sur la page
- function po_sit(ho_riz)
- {
- xhorzp = 0;
- while (ho_riz.tagName != 'BODY')
- {
- xhorzp += ho_riz.offsetLeft;
- ho_riz = ho_riz.offsetParent;
- }
- f=xhorzp //--// Valeur f = (le Trajet d'inversion de sens)
- }
- //-->
- </script>
<script type="text/javascript">
<!--//
var L_T = 1600 ; //--// La largeur totale du table des donnés
var D_H = 117 ; //--// La Hauteur du div Afficheur
var D_V = 300 ; //--// La largeur du div Afficheur, Attention si vous changez cette valeur vous devez modifier (M_G) et (M_D) ci-dessous
//--// Autrement dit ici nous avons 125 + 175 = 300, Ce qui nous donne la largeur totale du div Afficheur et une marge de pause : 175 – 125 = 50
var M_G = 125 ; //--// La marge gauche pour l'inversion à droite
var M_D = 175 ; //--// La marge droite pour l'inversion à gauche
var Z_Z =- (L_T-D_V); //--// c'est la limite droite
document.write('<style type="text/css">#ho_riz{border: 1px solid #CCCCCC;'+
'background-color: ; width:'+D_V+'; height:'+D_H+'; overflow:hidden; z-index: 10}'+
'.td-vh1{BORDER-RIGHT: #c0c0c0 1px dashed; BORDER-TOP: #c0c0c0 0px dashed; BORDER-LEFT: #c0c0c0 0px dashed; BORDER-BOTTOM: #c0c0c0 0px dashed;}'+
'.tab_vh1{font-size: 9pt; font-family: Arial; width:'+L_T+'px;}</style>');
var timer;
function dr_oite() { //--// aller on va à droite
/* Pour pouvoir utiliser ce code à titre personnel ne pas supprimer les lignes du commentaire ci-dessous.
(c) : abdelaziz rejeb Elalia 7016 Tunisie
site : http://abdelaziz.site.voila.fr
pour tout contact: http://intersite.site.voila.fr
Le 27/03/2009
*/
S_V=1
document.getElementById("menus").style.marginLeft =Z_Z++
timer=setTimeout('dr_oite();',1);
if(Z_Z==0){clearInterval(timer);gau_che()}
}
function gau_che() { //--// et on va à gauche
S_V=2
document.getElementById("menus").style.marginLeft =Z_Z--
timer=setTimeout('gau_che();',1);
if(Z_Z==(-(L_T-D_V)+1)){clearInterval(timer),dr_oite()}
}
function sur_vol() { // réaction à la sortie du curseur
if(S_V==2)
{
clearInterval(timer),gau_che();
}
else
{
clearInterval(timer),dr_oite();
}
}
//--// Les commandes de droite à gauche
var f=0;
function in_verseur(){
mouse_x = 0;
mouse_y = 0;
document.getElementById("ho_riz").onmousemove = position;
}
function position(evt){
if(!evt) evt = window.event;
mouse_x = evt.clientX;
mouse_y = evt.clientY;
if(mouse_x<(f+M_G)){clearInterval(timer),dr_oite()} //--// vers la droite
if(mouse_x>(f+M_D)){clearInterval(timer),gau_che()} //--// vers la gauche
if(mouse_x>(f+M_G) && mouse_x<(f+M_D)){clearInterval(timer)} //--// position de pause
}
function B_TN(NUM){ //--// commandes de la barre de défilement
if (NUM==4){document.getElementById('ho_riz').style.overflow='auto'};
if (NUM==5){document.getElementById('ho_riz').style.overflow='hidden'};
}
//--// position horizontale du div sur la page
function po_sit(ho_riz)
{
xhorzp = 0;
while (ho_riz.tagName != 'BODY')
{
xhorzp += ho_riz.offsetLeft;
ho_riz = ho_riz.offsetParent;
}
f=xhorzp //--// Valeur f = (le Trajet d'inversion de sens)
}
//-->
</script>
Conclusion
Ce code peut servir parfaitement pour afficher des vue panoramiques pour des images ou des graphiques. Si vous avez des question à me poser n'hésitez pas de me contacter sur cette adresse: http://intersite.site.voila.fr
Sources du même auteur
Sources de la même categorie
Commentaires et avis
Discussions en rapport avec ce code source dans le forum
recherche aide [ par g2m ]
nouveau dans la création de site, je bute sur une chose simple, créer un menu déroulant horizontale avec survol.Un truc simple quoi!Dans cette barre 8
défilement du fond [ par kinooo ]
J'ai récupérer un script pr le défilement du fond. Est ce que qq'un serait ce qui ne va pas car je ne voit pas ou auraut un autre script.SCRIPT:<ht
deplacement de texte par survol de mouse [ par JMO ]
Bonjour,Je suis tout "neuf" en javascript.En testant un exemple du bouquin "html et javascript - chaleat/charnay - page 122" sur le déplacement de tex
Défilement horizontale d'un texte [ par NestleMatt ]
Bonjour !Je voudrai savoir si il est possible en JavaScript de faire défiller du texte dans une InputBox via un texte tappé dans l'HTML ou peut étre v
survol de souris [ par ranouche ]
bonjour,je voudrais si possible afficher une image à coté d'un bouton flash au survol de la souris.Merci.
Problème barre de défilement horizontal sur mes pages [ par rem78 ]
Bonjour,Je suis confronté à un problème de barre de défilement horizontal qui apparaît sur ma page web automatiquement,cette page est constitué par un
Défilement automatique des pages d'un site ? [ par adelysnet ]
Bonjour,Je souhaite faire défiler des pages d'un site automatiquement.Chaque page finirait par viewimage2.php?imageID=1&style=listing En fait, seule l
Tableau et survol [ par YuL13 ]
Bonjour à tous, j'ai cherché un peu partout, et j'ai pas trouvé le type de script suivant: le changement de couleur de fond d'une cellule d'un tableau
effet de survol sur une colonne [ par matt438 ]
salutj'ai pb de création javscript/cssje voudrais créer un effet de survol sur une colonne d'un tableau. je n'ai réussi qu'à le faire en appelant l'id
Problème de Bouton survol !!! [ par vernoff ]
Salut, après avoir fini ma page internet avec tous les scripts, je me suis aperçu que mes boutons lorsque je les ai survolés ne marchaient pas, ils ét
|
Derniers Blogs
IMAGINE CUP 2012, MAKE A SIGN EN FINALEIMAGINE CUP 2012, MAKE A SIGN EN FINALE par junarnoalg
Voilà qui est fait, la nouvelle est officielle ! L'équipe belge "Make a Sign" va au pays des kangourous défendre son projet dans la catégorie Software Design. http://www.imaginecup.com/CompetitionsContent/Competition/WorldwideFinalists.aspx V...
Cliquez pour lire la suite de l'article par junarnoalg KINECT 1.5 IS OUT !KINECT 1.5 IS OUT ! par Vko
La version 1.5 du Kinect For Microsoft vient tout juste de sortir ! Plein de nouveautés: Tracking de squelette en Near Mode Détection en position assise Détection faciale avec un SDK dédié Documentation et des guideline (enfin) Un out...
Cliquez pour lire la suite de l'article par Vko LES ACTUALITéS DE LA SEMAINE SUR C2I.FR (14 MAI - 20 MAI) LES ACTUALITéS DE LA SEMAINE SUR C2I.FR (14 MAI - 20 MAI) par richardc
Mise à jour des Web API du 14 Mai
Réservez dès maintenant votre journée du 20 juin pour le Windows Azure Dev Camp 2012 à Paris
Mise à jour de Team Foundation Service
MechCommander 2 sur Windows 8
Entity Framework 5 Release Candidate e...
Cliquez pour lire la suite de l'article par richardc REACTIVE EXTENSIONS : CONSOMMER DES SERVICES AVEC RX PARTIE 3, LES PIèGES à éVITERREACTIVE EXTENSIONS : CONSOMMER DES SERVICES AVEC RX PARTIE 3, LES PIèGES à éVITER par Groc
Une mauvaise utilisation de rx lors de l'écriture d'une couche d'accès à des services peut conduire à des cas embarassants avec des erreurs mal gérées, des appels qui ne partent lorsqu'ils le devraient, et même des résultats incorrects . le tout nuis...
Cliquez pour lire la suite de l'article par Groc SHAREPOINT BLOG SITE, PROBLèME D'ARCHIVESSHAREPOINT BLOG SITE, PROBLèME D'ARCHIVES par junarnoalg
Dernièrement, nous avons migré le site
myTIC
vers un nouveau serveur SharePoint 2010. Dans les contenus que nous vouloins récupérer, nous avions un certain nombre de blogs.
Nous avons utilisé les commandes Power...
Cliquez pour lire la suite de l'article par junarnoalg
Forum
UTILISER UN .JSUTILISER UN .JS par zaikoe
Cliquez pour lire la suite par zaikoe
Logiciels
sDEVIS-FACTURES vlPRO (8.1.0.3)SDEVIS-FACTURES VLPRO (8.1.0.3)sDEVIS-FACTURES vlPRO a été mis au point pour les particuliers, créateurs, entrepreneurs, artisa... Cliquez pour télécharger sDEVIS-FACTURES vlPRO 974 Application Server (12.2.4.6)974 APPLICATION SERVER (12.2.4.6)Développez de puissantes applications dans un environnement de 'cloud computing', clusterisé, séc... Cliquez pour télécharger 974 Application Server vPicture (1.4.2.1)VPICTURE (1.4.2.1)Avec vPicture, hébergez vos images facilement et rapidement.
vPicture est un utilitaire simple, ... Cliquez pour télécharger vPicture Easy-Planning (2.2.1.6)EASY-PLANNING (2.2.1.6)Easy-Planning permet de créer des plannings sous la représentation de diagrammes et est adapté au... Cliquez pour télécharger Easy-Planning COM-BACKUP (2.0)COM-BACKUP (2.0)
COM-BACKUP est un logiciel de sauvegarde qui permet de planifier les sauvegardes de vos dossiers ...
Cliquez pour télécharger COM-BACKUP
|