Bords de clients magique HTML - Partie 2 Introduction Ceci est la deuxième partie de ma série, Bords de clients magique HTML. Ici, nous voyons comment mettre en œuvre les bords de la clientèle magique HTML. Dans cette partie, nous allons examiner le cas, où la calculatrice (élément DIV intérieure) sort du bord gauche de la page et remonte en cas de besoin. Nature de la gauche imitent bord Nous avons besoin de mettre un bord synoptique juste à côté du bord gauche. Notre avantage mimétique est un élément DIV.
Nous créons donc un élément DIV dont la hauteur est celle de la hauteur de la zone cliente de l'écran. La largeur est 1px. L'élément est donnée zéro padding, border zéro et une marge nulle. Il est également donné une valeur de z-index de CSS 2. De cette façon, il apparaît dans l'avant du corps, qui a une valeur de z-index inférieur. Il est donné un événement onmouseover, ce qui déclenche le défilement de l'élément DIV intérieure. Hauteur des bords La hauteur de l'élément DIV pour le bord gauche est donnée à la valeur de 100% de CSS.
De cette façon, le bord gauche prend la hauteur de la zone de client. Défilement de l'élément le bord gauche le corps a zéro remplissage et la marge zéro. La déclaration CSS correspondant pour cela est: body {background-color: # FF9933; padding: 0px; margin: 0px} L'élément de bord synoptique est:
La couleur de fond est celle de l'élément BODY. Il est un attribut onmouseover. Lorsque la souris est sur le bord imiter la fonction, doShiftRight () sera appelée.
Les fonctions que nous verrons à partir de maintenant sont désormais versions de ce que nous avons vu dans la partie précédente de la série modifiée. doShiftRight () est l'un d'entre eux; nous verrons les détails plus tard. La fonction, doShiftRight () se déplacera l'élément DIV intérieure vers la droite. Le script ne sera plus dans l'élément de corps, il sera dans l'élément HEAD. Vous pouvez effacer tous les scripts que vous avez dans l'élément de corps dans le chapitre précédent. L'élément DIV extérieure ne devrait pas avoir une frontière.
Effacer la propriété suivante à partir de la déclaration de CSS de l'élément DIV externe. border: 2px solide bleu; Remplacer ce que vous avez effacé avec: border-width: 0px; Les deux éléments DIV (internes et externes) sont les prochains éléments à bord synoptique (1px DIV). Assurez-vous que les propriétés dans toute déclaration de CSS sont séparés par des points-virgules. Fonction de base pour le défilement de la gauche lorsque le pointeur de la souris passe sur le bord gauche, la fonction, doShiftRight () est appelée. La fonction a deux variables associées.
Ceci est la fonction avec les variables: var x; //coordonnée x var TR; //valeur de retour de fonction setInterval () - déplacer fonction droite doShiftRight () {x = document.getElementById ('Calc') style.left. x = parseInt (x); TR = self.setInterval ("shiftRight ()", 10); } Le pixel est la plus petite composante reconnaissable sur la page Web. La page Web est rempli de pixels agencés en rangées et en colonnes. L'image entière que vous voyez sur l'écran est le résultat des pixels ayant des couleurs différentes.
La variable x est au-dessus d'une colonne de pixels à l'intérieur de l'élément DIV extérieur. Rappelez-vous que l'élément DIV intérieure épouse parfaitement l'élément DIV externe. Donc, cette variable est effectivement utilisé pour modifier la position horizontale de la DIV intérieure. La variable suivante, TR est pour l'ID de retour pour la méthode setInterval () à l'intérieur de la fonction ci-dessus. La première ligne de la fonction, des copies CSS laissé valeur de position de l'élément DIV intérieure à la variable x. Cette valeur gauche au début est -205px.
La ligne suivante fait en sorte qu'il est un entier. La troisième ligne appelle une fonction appelée, shiftRight () grâce à la fonction setInterval de DOM () toutes les 10ms. Le shiftRight () Cette fonction décale la DIV intérieure vers la droite et arrête lorsque le poste laissé CSS est supérieure ou égale à zéro. Ceci est la fonction: la fonction shiftRight () {document.getElementById ('Calc') style.left = x;. //arrêter le défilement à droite si (x>