Defilement ou scroll horizontal autrement fait automatique et manuel avec commandes

Télécharger le projet
Commenter

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
Télécharger le projet

Codes Sources

A voir également

S'inscrire maintenant

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.

Du même auteur (abdelaziz_info)