begin process at 2012 05 28 13:34:45
  Trouver un code source :
 
dans
 
Accueil > 

Code

 > 

Trucs & Astuces

 > DIV TOTALEMENT AUTOMATIQUE VERTICAL AVEC PLEIN DE COMMANDES ET CHOIX DE DIRECTION

DIV TOTALEMENT AUTOMATIQUE VERTICAL AVEC PLEIN DE COMMANDES ET CHOIX DE DIRECTION


 Information sur la source

Note :
Aucune note
Catégorie :Trucs & Astuces Classé sous :manipulation div, mouvement, déplacement Niveau :Débutant Date de création :25/03/2009 Date de mise à jour :25/03/2009 09:25:20 Vu / téléchargé :6 746 / 705

Auteur : abdelaziz_info

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

 Description

Cliquez pour voir la capture en taille normale
Div avec des multi commandes pour man½uvrer le défilement des donnés (texte, images et plein d'autre), avec énormément de choix de manipulations et d'avantages.

  -stabilité
  -Mouvement au choix
  -Défilement continu ver le haut
  -Défilement continu vers le bas
  -Déliement alternative haut et bas à la fois automatique ou manuellement
  -Barre de défilement disponible sur commande par un simple clic et elle disparaisse aussi de la même manière pour laisser un environnement propre
  -Compteur de trajet sur le quel on peut déclencher des événements

Le code est fonctionnel très léger, plus que facile et a beaucoup de possibilités d'amélioration...;

Un model de démonstration est disponible à cette adresse :
http://intersite.site.voila.fr/sources.htm

Source

  • <script type="text/javascript">
  • <!--// debut du code js qui peut être placé dans un (fichier.js)
  • var D_H = 2; // vitesse vers le haut
  • var D_B = 2; // vitesse vers le bas
  • var T_R = 100000000; // fin de couce
  • var S_V= 1; // indicateur de survol
  • var timer;
  • /* 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 9/03/2009
  • */
  • function bas_down() { // ici on mesure le traget total qui doit être (< T_R)
  • notre_div.scrollTop += T_R; // on va à fond ver le bas
  • document.getElementById("marqueur_TT").innerHTML = notre_div.scrollTop; // on recupere le compte total du traget
  • notre_div.scrollTop -= T_R; // on monte brusquement ver le haut
  • }
  • function move_down() { // on redessent à vitesse normale...
  • S_V=1;
  • notre_div.scrollTop -=D_B;
  • timer=setTimeout('move_down();',30);
  • document.getElementById("marqueur").innerHTML = notre_div.scrollTop;
  • if(notre_div.scrollTop == 0 ) {clearInterval(timer);move_up(); S_V=1}
  • if(D_H > 2){ // on affiche la commande récente...
  • document.getElementById('T_Mn').innerHTML='<img class="img_outil" src="outils/_h.jpg">';
  • }
  • else{
  • document.getElementById('T_Mn').innerHTML='<img class="img_outil" src="outils/h.jpg">';
  • }
  • }
  • function move_up() { // on remonte à vitesse normale...
  • S_V=2;
  • notre_div.scrollTop +=D_H;
  • timer=setTimeout('move_up();',30);
  • document.getElementById("marqueur").innerHTML = notre_div.scrollTop;
  • if(notre_div.scrollTop == document.getElementById("marqueur_TT").innerHTML ) {clearInterval(timer);move_down(); S_V=2}
  • if(D_B > 2){ // on affiche la commande récente...
  • document.getElementById('T_Mn').innerHTML='<img class="img_outil" src="outils/_b.jpg">';
  • }
  • else{
  • document.getElementById('T_Mn').innerHTML='<img class="img_outil" src="outils/b.jpg">';
  • }
  • }
  • function B_TN(NUM) { // les commandes
  • if (NUM==0){clearTimeout(timer);document.getElementById('T_Mn').innerHTML='<img src='+document.getElementById('B_T2').src+'>'};
  • if (NUM==1){clearTimeout(timer);move_down();D_B=2;D_H=2;S_V=1};
  • if (NUM==2){document.getElementById('T_Mn').innerHTML='<img src='+document.getElementById('B_T2').src+'>';clearTimeout(timer);D_B=2;D_H=2};
  • if (NUM==3){clearTimeout(timer);move_up();D_B=2;D_H=2;S_V=2};
  • if (NUM==4){document.getElementById('T_Mn').innerHTML='<img src='+document.getElementById('B_T4').src+'>';document.getElementById('notre_div').style.overflow='auto'};
  • if (NUM==5){document.getElementById('T_Mn').innerHTML='<img src='+document.getElementById('B_T5').src+'>';document.getElementById('notre_div').style.overflow='hidden'};
  • if (NUM==6){document.getElementById('T_Mn').innerHTML='<img src='+document.getElementById('B_T6').src+'>';clearTimeout(timer);move_down();D_B=2;D_H=10000;S_V=1};
  • if (NUM==7){document.getElementById('T_Mn').innerHTML='<img src='+document.getElementById('B_T7').src+'>';clearTimeout(timer);move_up();D_H=2;D_B=10000;S_V=2};
  • }
  • function sur_vol() { // réaction à la sortie du curseur
  • if(S_V==2)
  • {
  • move_up();
  • }
  • else
  • {
  • move_down();
  • }
  • }
  • function intilak(){ // declanchement des mouvements
  • bas_down();
  • clearInterval(timer);
  • move_up(); // Démarrage du mouvement régulier vers le haut
  • }
  • function bg_imag() { // image de fond, cette function n'a pas été activée
  • document.getElementById('notre_div').style.backgroundImage = "url("+ document.getElementById('ar_er_pl').value +")";
  • }
  • // fin de code js -->
  • </script>
<script type="text/javascript">
<!--// debut du code js qui peut être placé dans un (fichier.js)
var D_H = 2; // vitesse vers le haut
var D_B = 2; // vitesse vers le bas
var T_R = 100000000; // fin de couce
var S_V= 1; // indicateur de survol

var timer;
/* 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 9/03/2009
*/
function bas_down() { // ici on mesure le traget total qui doit être (< T_R)
    notre_div.scrollTop += T_R; // on va à fond ver le bas
    document.getElementById("marqueur_TT").innerHTML = notre_div.scrollTop; // on recupere le compte total du traget
    notre_div.scrollTop -= T_R; // on monte brusquement ver le haut
}

function move_down() { // on redessent à vitesse normale...
S_V=1;
    notre_div.scrollTop -=D_B;
    timer=setTimeout('move_down();',30);
    document.getElementById("marqueur").innerHTML = notre_div.scrollTop;
    if(notre_div.scrollTop == 0 ) {clearInterval(timer);move_up(); S_V=1}
    if(D_H > 2){ // on affiche la commande récente...
    document.getElementById('T_Mn').innerHTML='<img class="img_outil" src="outils/_h.jpg">';
    }
    else{
    document.getElementById('T_Mn').innerHTML='<img class="img_outil" src="outils/h.jpg">';
    }
}

function move_up() { // on remonte à vitesse normale...
S_V=2;
    notre_div.scrollTop +=D_H;
    timer=setTimeout('move_up();',30);
    document.getElementById("marqueur").innerHTML = notre_div.scrollTop;
    if(notre_div.scrollTop == document.getElementById("marqueur_TT").innerHTML ) {clearInterval(timer);move_down(); S_V=2}
    if(D_B > 2){ // on affiche la commande récente...
    document.getElementById('T_Mn').innerHTML='<img class="img_outil" src="outils/_b.jpg">';
    }
    else{
    document.getElementById('T_Mn').innerHTML='<img class="img_outil" src="outils/b.jpg">';
    }
}

function B_TN(NUM) { // les commandes
    if (NUM==0){clearTimeout(timer);document.getElementById('T_Mn').innerHTML='<img src='+document.getElementById('B_T2').src+'>'};
    if (NUM==1){clearTimeout(timer);move_down();D_B=2;D_H=2;S_V=1};
    if (NUM==2){document.getElementById('T_Mn').innerHTML='<img src='+document.getElementById('B_T2').src+'>';clearTimeout(timer);D_B=2;D_H=2};
    if (NUM==3){clearTimeout(timer);move_up();D_B=2;D_H=2;S_V=2};
    if (NUM==4){document.getElementById('T_Mn').innerHTML='<img src='+document.getElementById('B_T4').src+'>';document.getElementById('notre_div').style.overflow='auto'};
    if (NUM==5){document.getElementById('T_Mn').innerHTML='<img src='+document.getElementById('B_T5').src+'>';document.getElementById('notre_div').style.overflow='hidden'};
    if (NUM==6){document.getElementById('T_Mn').innerHTML='<img src='+document.getElementById('B_T6').src+'>';clearTimeout(timer);move_down();D_B=2;D_H=10000;S_V=1};
    if (NUM==7){document.getElementById('T_Mn').innerHTML='<img src='+document.getElementById('B_T7').src+'>';clearTimeout(timer);move_up();D_H=2;D_B=10000;S_V=2};
}

function sur_vol() { // réaction à la sortie du curseur
   if(S_V==2)
   {
    move_up();
   }
   else
   {
    move_down();
   }
}

function intilak(){ // declanchement des mouvements
    bas_down();
    clearInterval(timer);
    move_up(); // Démarrage du mouvement régulier vers le haut
}

function bg_imag()  { // image de fond, cette function n'a pas été activée
    document.getElementById('notre_div').style.backgroundImage = "url("+ document.getElementById('ar_er_pl').value +")";
}

// fin de code js -->
</script>

 Conclusion

Pour toute question 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 DEFILEMENT OU SCROLL HORIZONTAL AUTREMENT FAIT AUTOMATIQUE E...
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

PARSER LES CARACTÈRES HTML D'UNE STRING par jdmcreator
CONSTRUCTION D'UNE TABLE TRIABLE À PARTIR D'UN TABLEAU 2D par phm
Source avec Zip Source avec une capture SUBDIVISER LE RÉSULTAT D'UNE RECHERCHE EN PAGES par kimmp
Source avec Zip TIMER : SETTIMEOUT & SETINTERVAL AMÉLIORÉS par jdmcreator
Source avec Zip Source avec une capture ONGLETS ET CHANGEMENT INSTANTANÉ DE LA LANGUE par william voirol

 Sources en rapport avec celle ci

Source avec Zip Source avec une capture DKSDRAGDROP : UNE BIBLIOTHÈQUE DE DRAG AND DROP ET DE GESTIO... par DARKSIDIOUS
Source avec Zip DIV APPARITION FUN par abdoulax
LIBRAIRIE DE DRAG AND DROP par mickaelpfr
Source avec Zip TRANSFORMATION DE TAILLE DÉPLACEMENT ET ACCROCHAGE D'IMAGE E... par abdelaziz_info
Source avec Zip PROTOTYPE DE DRAG'N DROP par FasteX_

Commentaires et avis

Commentaire de mdc888 le 30/03/2010 11:32:57

Pas mal du tout ce code...
Très complet :)
Par contre le mouvement saccade un peu par moment.
Je vais tenter de le simplifier un peu et de le tester en prod, sur un site public ou tout le monde n'aura pas des PC super puissants pour l'afficher.

En tous cas bravo !

 Ajouter un commentaire


Discussions en rapport avec ce code source dans le forum

Déplacement d'un calque. [ par LocalStone ] Salut ! Et bien voilà, je cherche à deplacer un calque (DIV) sur l'écran (comme une simple fenetre) avec le curseur de la souris, mais je n'y arrive Problème de déplacement d'une image [ par chaloup ] Bonjour, voila je cherche a faire un jeu en java mais je n'arrive pas a faire qu'un objet ce déplace en fonction du temps suivant une fonctions mathém Une [image] fixe qui suis la souris [ par ptitsky ] Bonjour à tous ,Mon pb :Je voudrai faire qu'une image suivent le mouvement de la souris, mais, que un bout de cette meme image reste au meme endroit.E mouvement images en Javascript [ par kartoon ] Bonjour,J'ai plusieurs cas de figure&nbsp; et de faire la plus r&#233;alisable :Je voudrais&nbsp; avoir le moyen de pouvoir intervertir des images (3) capter mouvement souris [ par fmazoue ] Je voulais savoi rsi il &#233;tais possible de capter les mouvement de souris lorsque l'on appui sur la molette ? Parce que je me demandais si il &#23 Tableau avec déplacement par les fleches et action si <RC> sur une ligne [ par abcxtreme ] Bonjour &#224; tous, Je suis tout juste d&#233;butant en PHP, javascript et je cherche un script (avec un exemple id&#233;alement) permettant de g&#23 Déplacement d'un calque [ par Tilix ] alut, j'ai trouv&#233; ce script, permettant d'affich&#233; un calque css quand la souris se trouve sur le lien Code : CSS &lt;!-- a Déplacement d'une image dans une boite [ par carteq ] J'ai construit un site de Web-Mapping (cartographie interactive). J'ai ajouté une fonction de "glisser-déplacer la carte". Le problème, c'est l'image Scrollbar et déplacement d'une image avec la souris [ par cepekinio ] Bonjour,Contexte : appli web J2EE (JSP/JVScript/java) .J'ai réaliser une sorte de visionneuse de document(au format jpg) et je viens d'implémenter une Déplacement aléatoire de plusieurs images [ par tales ] Bonjour,Je cherche un script qui me permette d'avoir un déplacement aléatoire de plusieurs images et chaque fois que les images changent de direction


Nos sponsors


Sondage...

Comparez les prix

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,061 sec (4)

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