Es ist das Wochenende, es ist Zeit, morgen zusammenzufassen. Ich habe das Gefühl, einige Dinge gelernt zu haben, aber ich habe das Gefühl, dass ich nicht viel gelernt habe. Lassen Sie es uns morgen analysieren. Schauen wir uns die Probleme an, die ich heute analysieren möchte.
Jeder ist mit diesem Bild vertraut:
- - ~ ~ - ~ —————————————————————— —————— ———— ———— ————— ————— ———— ———— —————— ~
Heute werden wir es analysieren und erstellen. Führen Sie zunächst die Eigenschaften dieser Popup-Box vor:
* Immer an den Seitenrand angeschlossen
* Ändern Sie die Position nicht, wenn die Seite steigt und fällt
* Wenn die Maus vorbeikommt, werden detaillierte Informationen angezeigt, und wenn sie abreist, kehrt sie in ihren ursprünglichen Zustand zurück.
Auf diese Weise können wir uns grob an mehrere mögliche Funktionen vorstellen: absolute Positionierung des Postens; Überwachung und Methoden der vorübergehenden Maus; Diese werden definitiv verwendet, aber was sind die anderen Verwendungszwecke außer diesen und wie werden sie implementiert?
1. Implementieren Sie alle angezeigten Schnittstellenstatus
Schreiben Sie zuerst den HTML -Code
Die Codekopie lautet wie folgt:
<span style = "Schriftgröße: 12px;"> <div id = "Shareleft">
<div>
<p> <a href = "#"> Tipp </a> </p>
</div>
<p id = "mainmsg" onmouseover = "showtip ()">
Teilen an
</p>
</div> </span>
Dann CSS -Stilcodierung
Die Codekopie lautet wie folgt:
<span style = "Schriftgröße: 12px;">*{Margin: 0; Padding: 0;}
#Shareleft {Position: behoben; Hintergrundfarbe: Gelb; oben: 50px; Breite: 300px; Höhe: 600px; rechts: 0px;}
#Mainmsg {color: #fff; Position: absolut; Cursor: Zeiger; Text-Align: Mitte; Hintergrundfarbe: rot; oben: 60px; Breite: 100px; Höhe: 400px; Padding: 20px 0 0 10px; }
.List {float: rechts; Hintergrundfarbe: #fff; Breite: 280px; Höhe: 580px; Margin: 10px 10px 10px 10px;} </span>
Lassen Sie uns hier die wichtigsten Punkte analysieren: a. Post: Die feste Position ist sehr gut; B. Rechts: 0PX, die spezifische Anwendung davon wird später im Detail erläutert, ist aber auch hier sehr wichtig. 3..
Haha, dies ist die größte Popup-Box des Jahres. Lassen Sie uns weiter über den Popup-Effekt von JS sprechen
2. Verstecken Sie den detaillierten Teil und veranlassen, dass der Teil draußen austritt
Dies ist relativ einfach. Um es zu ändern, ändern Sie einfach den richtigen Wert von Shareleft, rechts = -300px, was die Breite der Div ist
3. Js, um Pop-up-Effekt zu erzielen
Dies ist nicht das erste Mal, dass wir den Effekt dieses Timers verwendet haben. Wir haben es bei der Implementierung des Schreibmaschineneffekts durch JS angewendet. Hier haben wir gerade das Zeitpunkt geändert.
Die Codekopie lautet wie folgt:
<span style = "Schriftgröße: 12px;"> <script type = "text/javaScript">
var timer = null;
var count = 0;
var tip = function (Position, Ziel, Geschwindigkeit) {
ClearInterval (Timer);
timer = setInterval (function () {
if (count> Position.Offsetwidth) {
ClearInterval (Timer);
}anders{
Position.Style.Right+= Fenster.Count+"px";
Fenster.count ++;
};
}, Geschwindigkeit);
};
Funktion showtip () {
var Position = document.getElementById ("Shareleft");
Tipp (Position, Dokument.body.Clientwidth, 1000);
};
</script> </span>
Die wichtigsten Punkte in diesem Code sind: Offsetwidth, .style.Right usw. Ich werde vorerst nicht darüber sprechen. Ich werde es speziell vorstellen. Lassen Sie es uns zuerst so verwenden. Kennen wir einfach die Bedeutung.
Nachdem Sie dies gründlich verstanden haben, wird der Effekt jetzt erreicht, sodass Sie es auch versuchen können.