begin process at 2012 05 28 13:22:46
  Trouver un code source :
 
dans
 
Accueil > 

Code

 > 

Effets

 > 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

Note :
Aucune note
Catégorie :Effets Classé sous :défilement, survol Niveau :Débutant Date de création :30/03/2009 Date de mise à jour :30/03/2009 09:27:29 Vu / téléchargé :11 244 / 1 243

Auteur : abdelaziz_info

Ecrire un message privé
Site perso
Commentaire sur cette source (6)
Ajouter un commentaire et/ou une note

 Description

Cliquez pour voir la capture en taille normale
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

 Fichier Zip

Les Membres Club peuvent télécharger directement un fichier contenu dans le zip sans télécharger le zip en entier !

Télécharger le zip


 Sources du même auteur

Source avec Zip Source avec une capture INSTALLEZ UN CURSEUR GÉANT, SUPER GÉANT CURSEUR DE LA SOURIS...
Source avec Zip Source avec une capture DIV TOTALEMENT AUTOMATIQUE VERTICAL AVEC PLEIN DE COMMANDES...
Source avec Zip Source avec une capture AUTO MANUEL PARAGRAPHES, DIAPO PARAGRAPHES OU AUSSI PROJECTE...
Source avec Zip CONFORTABLE AUTO DÉFILEMENT OU (SCROLL BAR) TOUT AUTOMATIQUE...
Source avec Zip DIAPORAMA 360° V2 MOUVEMENT DANS LES QUATRE SENS ROTATION VA...

 Sources de la même categorie

Source avec Zip Source avec une capture BOUTON ROTATIF par kazma
Source avec Zip Source avec une capture SHOWMAPAREA par phidelum
DHTML IE FILTRE DÉGRADÉ (OUTIL HTML POUR DÉVELOPPEUR) par internetdev
Source avec Zip ANIMATION DU TEXTE par brennal
Source avec Zip Source avec une capture EFFET RAYONS DU SOLEIL par tefa24600

 Sources en rapport avec celle ci

Source avec Zip Source avec une capture SCROLLBAR CLASS par heycraft
Source avec Zip MARQUEE VERSION2 COMPATIBLE MOOTOOLS, JQUERY, PROTOTYPE ET S... par Kimjoa
Source avec Zip CONFORTABLE AUTO DÉFILEMENT OU (SCROLL BAR) TOUT AUTOMATIQUE... par abdelaziz_info
DEUX MESSAGES DANS LA BARRE D'ÉTAT par pgl10
Source avec Zip VITESSE AUTOMATIQUE ET VARIABLE DÉFILEMENT SANS BARRE ... par abdelaziz_info

Commentaires et avis

Commentaire de jdmcreator le 30/03/2009 14:05:19

Bonjour,

Félicitation pour la source, la manière dont tu fait défiler ton texte est très intéressante. J'aime aussi l'idée de faire changer de bord lors de la fin, mais il aurait aussi été intéressant de faire comme en boucle.

Malheureusement, du moins du ton site, ta source ne fonctionne pas sous Safari 3.1.2 par contre, aucun problème du côté d'Internet Explorer 7 ;)

Bonne continuation et j'espère que vous parviendrez à résoudre ce problème de compatibilité (je n'ai pas regardé le code)

JDMCreator

Commentaire de abdelaziz_info le 02/04/2009 21:40:37

Bon soir,

C'est corrigé.

Merci

Commentaire de jdmcreator le 02/04/2009 23:34:20

Merci beaucoup et encore félicitation pour votre source ;)

Commentaire de abdelaziz_info le 03/04/2009 02:53:16

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.

Commentaire de jdmcreator le 03/04/2009 03:08:16

Au fait qu'elle était l'erreur sur Safari ? (cela pourrait m'aider à éviter des erreurs pour mes futurs sources ;) )

Commentaire de abdelaziz_info le 03/04/2009 04:13:21

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

 Ajouter un commentaire


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:&lt;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


Nos sponsors


Sondage...

CalendriCode

Mai 2012
LMMJVSD
 123456
78910111213
14151617181920
21222324252627
28293031   

Consulter la suite du CalendriCode

A découvrir



 
Développement réalisé par Nicolas SOREL (Nix) avec l'aide de : Cyril DURAND et Emmanuel (EBArtSoft), Merci à Vincent pour ses précieux conseils.
CodeS-SourceS.com© Toute reproduction même partielle est interdite sauf accord écrit du Webmaster
CodeS-SourceS.com© est une marque déposée tous droits réservés

Google Coop CodeS-SourceS Google Coop CodeS-SourceS
Temps d'éxécution de la page : 1,217 sec (4)

Nous contacter | Annoncer sur CodeS-SourceS | Mentions légales