Div totalement automatique vertical avec plein de commandes et choix de direction

Soyez le premier à donner votre avis sur cette source.

Vue 9 741 fois - Téléchargée 1 079 fois

Télécharger le projet
Commenter

Description

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

Source / Exemple : 

<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.elalia.org] 
pour tout contact: [http://abdelaziz.elalia.net]
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://abdelaziz.elalia.net
Télécharger le projet

Codes Sources

A voir également

Ajouter un commentaire Commentaire
cs_mdc888 Messages postés 25 Date d'inscription mardi 14 juin 2005 Statut Membre Dernière intervention 3 janvier 2012
30 mars 2010 à 11:32
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 !
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)