C'est le week-end, il est temps de résumer demain. J'ai l'impression d'avoir appris certaines choses, mais j'ai l'impression de ne pas avoir beaucoup appris. Analyons-le demain. Jetons un coup d'œil aux problèmes que je souhaite analyser aujourd'hui.
Tout le monde connaît cette image:
―Vision
Aujourd'hui, nous allons l'analyser et le créer. Préduisons d'abord les caractéristiques de cette boîte contextuelle:
* Toujours attaché à la bordure de la page
* Ne changez pas la position à mesure que la page monte et tombe
* Lorsque la souris passe, des informations détaillées apparaîtront et lorsqu'elle partira, elle reviendra à son état d'origine.
De cette façon, nous pouvons penser à peu près plusieurs fonctions possibles: positionnement absolu du poste; Surveillance et méthodes de la souris passant par; Ceux-ci seront certainement utilisés, mais quelles sont les autres utilisations en plus de celles-ci, et comment sont-elles mises en œuvre?
1. Implémentez tout l'état de l'interface affichée
Écrivez d'abord le code HTML
La copie de code est la suivante:
<span style = "font-size: 12px;"> <div id = "shareleft">
<div>
<p> <a href = "#"> TIP </a> </p>
</div>
<p id = "mainmsg" onMouseover = "showtip ()">
Partager
</p>
</div> </span>
Puis codage de style CSS
La copie de code est la suivante:
<span style = "Font-Size: 12px;"> * {margin: 0; rembourrage: 0;}
#shareleft {position: fixe; fond-couleur: jaune; haut: 50px; largeur: 300px; hauteur: 600px; à droite: 0px;}
#mainmsg {couleur: #fff; position: absolue; curseur: pointeur; texte-adign: central; fond-couleur: rouge; haut: 60px; largeur: 100px; hauteur: 400px; padding: 20px 0 0 10px; margin-left: -100px; frontr-radius: 50px 0 0 50px; }
.List {float: droite; fond-couleur: #fff; largeur: 280px; hauteur: 580px; marge: 10px 10px 10px 10px;} </span>
Analyons les points clés ici: a. Post: La position fixe est très bonne; né À droite: 0px, l'application spécifique de ceci sera expliquée en détail plus tard, mais elle est également très importante ici; 3. #Mainmsg marge-gauche: -100px, cet endroit est également très important, alors jetons un coup d'œil à l'effet
Haha, c'est la plus grande boîte pop-up de l'année. Continuons à parler de l'effet pop-up de JS
2. Masquer la partie détaillée, incitant que la pièce fuit à l'extérieur
C'est relativement simple. Pour le modifier, modifiez simplement la bonne valeur de Shareleft, à droite = -300px, qui est la largeur du div
3. JS pour atteindre l'effet pop-up
Ce n'est pas la première fois que nous utilisons l'effet de cette minuterie. Nous l'avons appliqué lors de la mise en œuvre de l'effet de machine à écrire par JS., Ici, nous venons de changer l'objet de synchronisation.
La copie de code est la suivante:
<span style = "font-size: 12px;"> <script type = "text / javascript">
var timer = null;
Var Count = 0;
Var Tip = fonction (position, cible, vitesse) {
ClearInterval (temporisateur);
timer = setInterval (function () {
if (count> position.offsetwidth) {
ClearInterval (temporisateur);
}autre{
position.style.Right + = Window.Count + "PX";
window.Count ++;
};
}, vitesse);
};
fonction showtip () {
var position = document.getElementById ("shareleft");
TIP (position, document.body.clientwidth, 1000);
};
</cript> </span>
Les points les plus importants auxquels faire attention dans ce code sont: OffsetWidth, .Style.Right, etc. Je n'en parlerai pas pour le moment. Je vais le présenter spécifiquement. Utilisons-le comme celui-ci en premier, connaissons simplement le sens.
Après avoir bien compris cela, l'effet sera réalisé maintenant, vous pouvez donc l'essayer aussi.