Viele Blogger im Blog Park haben ein Symbol in der unteren rechten Ecke der Seite im Blog. Egal wie sich der Bildschirm erstreckt, er bleibt immer in der unteren rechten Ecke. Klicken Sie auf die Seite nach oben. Denken wir darüber nach, eine Demo zu schreiben, um diesen Effekt später zu erzielen.
1. Die untere rechte Ecke des Symbols ist festgelegt.
1. SS liefert 4 Layoutmethoden. Fixed repräsentiert absolute Positionierungselemente. Deshalb haben wir uns für die Erzielung einer Icon -Fixierung entschieden.
| Absolute | Erzeugt absolut positionierte Elemente und Positionierung relativ zum ersten übergeordneten Element als statische Positionierung. Die Position eines Elements wird durch die Attribute "links", "oben", "rechts" und "unterer" angegeben. |
| behoben | Erzeugen Sie absolut positionierte Elemente und positionieren Sie relativ zum Browserfenster. Die Position eines Elements wird durch die Attribute "links", "oben", "rechts" und "unterer" angegeben. |
| Relativ | Erzeugen Sie relativ positionierte Elemente und Positionierung relativ zu ihrer normalen Position. Daher fügt "links: 20" 20 Pixel zur linken Position des Elements hinzu. |
| statisch | Standardwert. Es gibt keine Positionierung, das Element erscheint im normalen Strom (ignoriert die obere, unten, linke, rechte oder z-Index-Deklaration). |
| erben | Gibt an, dass der Wert des Positionsattributs aus dem übergeordneten Element geerbt werden sollte. |
2. Der Code ist wie folgt. Die Schaltfläche Taste wird immer in der unteren rechten Ecke des Bildschirms platziert. Egal, ob es die obere und untere Präzisionsleiste zieht oder die Browserfenstergröße dehnt.
Die Codekopie lautet wie folgt:
#mytopbtn {
unten: 5px;
Rechts: 5px;
Position: fest;
}
2. Nach dem Klicken kehren Sie nach dem Klicken in die obere Ecke der Seite zurück.
1. Um in die obere Ecke des Bildschirms zurückzukehren, müssen Sie verstehen, wie Sie JavaScript verwenden, um die Auf- und Abbewegung der Dragbalke zu bedienen. JavaScript bietet Scrollby- und Scroll -Methoden.
Die Codekopie lautet wie folgt:
window.scrollby (0, -30) // 30 Pixel auf dem Bildschirm verschieben
window.scroll (0,0) // Der Bildschirm kehrt in die obere Ecke zurück
2. In dem obigen erwähnte, wie man die Drag -Leiste bewegt. Dann müssen Sie die Methoden SetInterval und ClearInterval verwenden. Auf diese Weise können 30 Pixel in weniger als 10 Millisekunden den Bildschirm nach oben bewegt werden.
Die Codekopie lautet wie folgt:
<body>
<div id = "mydiv">
</div>
<button id = "mytopbtn" onclick = "topfunc ()"> nach oben </button>
</body>
Die Codekopie lautet wie folgt:
var myvar;
Funktion topfunc () {
myvar = setInterval (EveryScrollby, 10);
}
Funktion EveryScrollby (alles) {
if (document.documentElement.scrolltop <= 0) {
ClearInterval (myvar);
}anders{
Window.Scrollby (0, -30);
}
}
III. Expandieren
Die obere Taste wird implementiert. Wie implementieren wir die Schaltfläche Klicken Sie auf den unteren Bildschirm? Tatsächlich ist das Prinzip ähnlich, daher werden wir hier keine Demo schreiben. Stellen Sie einige Attribute als Referenz an.
Die Codekopie lautet wie folgt:
Die sichtbare Flächenbreite der Webseite: Dokument.body.Clientwidth
Die sichtbare Höhe der Webseite: Dokument.Body.ClientHeight
Die sichtbare Flächenbreite der Webseite: document.body.Offsetwidth (einschließlich der Breite der Kantenlinie)
Die sichtbare Höhe der Webseite: Dokument.Body.offseteight (einschließlich der Breite der Kantenlinie)
Volltextbreite der Webseite: Dokument.body.Scrollwidth
Volltext der Webseite: Dokument.body.ScrollHeight
Die Webseite ist auf hoher Ebene eingeführt: document.body.scrolltop
Links von der Webseite, die eingeführt wurde: document.body.scrollleft
Im Hauptteil der Webseite: Fenster.Screentop
Links vom Haupttext der Webseite: Fenster.Screenleft
Auflösung der Hochbildschirme: window.screen.hohthy
Breite der Bildschirmauflösung: Fenster.Screen.width
Bildschirm verfügbarer Arbeitsbereich Höhe: Fenster.Screen.availHeight
Bildschirm verfügbar Arbeitsbereich Breite: window.screen.availwidth
Das obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, dass die Kinderschuhe, die gerne Blogs spielen, es mögen.