Defilement ou scroll horizontal autrement fait automatique et manuel avec commandes

Soyez le premier à donner votre avis sur cette source.

Vue 19 645 fois - Téléchargée 2 055 fois

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://abdelaziz.elalia.net

Source / Exemple :

 
<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.elalia.org]  
pour tout contact: [http://abdelaziz.elalia.net] 
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://abdelaziz.elalia.net

Codes Sources

A voir également

Ajouter un commentaire

Commentaires

abdelaziz_info
Messages postés
120
Date d'inscription
lundi 19 juillet 2004
Statut
Membre
Dernière intervention
12 janvier 2017
-
Une explication détaillée sur ce sujet est publiée sous titre (Observation) à cette adresse :

http://intersite.site.voila.fr/khaled/codes/div_scroll_horizontal_i.htm
jdmcreator
Messages postés
647
Date d'inscription
samedi 30 décembre 2000
Statut
Membre
Dernière intervention
20 juillet 2012
4 -
Au fait qu'elle était l'erreur sur Safari ? (cela pourrait m'aider à éviter des erreurs pour mes futurs sources ;) )
abdelaziz_info
Messages postés
120
Date d'inscription
lundi 19 juillet 2004
Statut
Membre
Dernière intervention
12 janvier 2017
-
Bonjour

C'est moi qui vous merci infiniment,

Sans votre remarque je ne n'arrive jamais à savoir ça car je ne navigue jamais sous safari.

Cordialement.
jdmcreator
Messages postés
647
Date d'inscription
samedi 30 décembre 2000
Statut
Membre
Dernière intervention
20 juillet 2012
4 -
Merci beaucoup et encore félicitation pour votre source ;)
abdelaziz_info
Messages postés
120
Date d'inscription
lundi 19 juillet 2004
Statut
Membre
Dernière intervention
12 janvier 2017
-
Bon soir,

C’est corrigé.

Merci

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.