Bords de clients magique HTML - Partie 4 Introduction Ceci est la quatrième et la dernière partie de ma série, Bords de clients magique HTML. Dans cette partie de la série, je vous donne le code complet du projet. Nous concluons également en ayant quelques commentaires utiles. Vers la fin de cette partie, je vous donne (un lien vers) le code complet du projet en format de fichier zip. Le Code et son fonctionnement, je vous donnera le code tel qu'il se trouve dans le fichier zip de haut en bas.
Encore une fois, je vais être bref dans l'explication puisque vous devriez avoir vu beaucoup de lui en bits. Nous commençons avec les variables globales qui sont utilisés dans de nombreuses sections du code. Ces variables sont les suivantes: bord var = ""; var paneBack = true; var leftPaneShown = false; var topPaneShown = false; Ces variables sont liées à certaines des exigences techniques que nous avons vu dans la troisième partie de la série. Lorsque le volet (DIV intérieure) a défilé à partir du bord gauche dans la page, cette variable de bord est donnée la valeur de «gauche».
Lorsque le volet a défilé par le haut, vers le bas dans la page, la variable est donnée la valeur, "top". Lorsque le volet est encore à bord ou est retourné dans le bord, la variable, paneBack est utilisé pour indiquer si la valeur de vrai. Maintenant, lorsque vous cliquez sur l'élément BODY le volet devrait défiler loin (dans le bord). Lorsque vous cliquez sur le volet, puisque le volet est en face de l'élément de corps, le corps reçoit indirectement un clic. Vous ne voulez pas le volet pour revenir en arrière lorsque le corps est pas cliqué directement.
Les deux variables suivantes sont utilisées ci-dessus pour ce produit. La première (leftPaneShown) est pour le volet du bord gauche. Le second (topPaneShown) appartient à la sous-fenêtre du bord supérieur. Code pour Maj droite et gauche Ici, je parle le code responsable de l'affichage de la DIV extérieur et décalant la DIV intérieure vers la droite et vers la gauche. Je parle aussi le segment de code qui supprime le volet de la page. Les variables utilisées par cette section sont: var x; TR var; TL var; var processOnL = false; La variable, x représente la coordonnée x du pixel.
La variable, TR est l'ID de rentrer de la fonction setInterval () lors du passage le volet à droite. La variable, TL est l'ID renvoyée de la fonction setInterval () lors du passage le volet à gauche. Dans le processus de déplacer le panneau vers la droite ou la gauche, la direction ne peut pas être inversée tant que le mouvement est terminé. La variable, processOnL est utilisé pour cela. Il est initialement défini à false; sa valeur par défaut est false. Le doShiftRight () La fonction doShiftRight () prépare la page pour déplacer le volet à droite.
Ceci est la fonction: la fonction doShiftRight () {if ((processOnL == false) && (paneBack == true)) {processOnL = true; paneBack = false; . document.getElementById ('Calc') style.left = "-205px"; style.left x = document.getElementById ('Calc.'); x = parseInt (x); //haut de volet document.getElementById ('Cont') de style.top = "25%". //afficher la DIV extérieur document.getElementById ('Cont') style.display = "bloc". TR = self.
setInterval ("shiftRight ()", 10); }} Les déclarations à l'intérieur de la fonction doShiftRight () ne sont exécutés que lorsque le volet (élément DIV intérieure) ne sont pas en mouvement et quand il est à l'intérieur du bord gauche (ou est retourné dans le bord). Le test de la condition If prend soin de cela. La première déclaration dans le cas du bloc définit la variable, processOnL true, ce qui signifie que le volet est en mouvement ou est de commencer à se déplacer. La déclaration suivante définit la variable, paneBack false, ce qui signifie le volet est plus dans le bord.
Rappelez-vous que dans le projet, l'attribut de style CSS a des valeurs haut et à gauche pour la DIV externe comme 0px. Ainsi, lorsque la page Web est juste ouvert, le placement de la DIV extérieure est sur la page à l'espace client supérieur gauche. Sa propriété d'affichage à ce moment est "none", de sorte qu'il ne se voit pas, et ne pas occuper l'espace; il n'a pas d'effet sur les éléments qui seraient derrière elle. La déclaration suivante dans la fonction donne la DIV intérieure une valeur gauche de -205px. Cette déplace la DIV intérieure dans le bord synoptique.
Il sera déplacé à partir de là. Ce souci de cohérence pour vous assurer que le décalage commence à partir de la position droite. La déclaration suivante met le haut de l'élément DIV extérieur et tout son contenu 25% lointain en bas de la zone cliente. La DIV intérieure sera déplacée horizontalement dans l'élément DIV extérieure à cette position. Toute position que vous donnez à la DIV externe, la DIV intérieure prend ainsi par le fait qu'il est à l'intérieur de la DIV externe. La valeur de la propriété position de la DIV intérieure est «relative».
Avec cela, en modifiant les valeurs des propriétés left et top de la DIV intérieure, vous le déplacez dans le DIV externe. La déclaration suivante affiche la DIV externe. Suite à notre code, lorsque la DIV externe est affiché, la DIV intérieure est également affiché. La dernière déclaration de la fonction est familier (à partir des parties précédentes de la série). Le shiftRight () Fonction Telle est la fonction; il est familier. Je vais seulement expliquer les déclarations ajoutée. shiftRight fonction () {document.getElementById ('Calc') style.left = x.
; //arrêter le défilement à droite si (x>