Natives JS zum Implementieren der Seitenleiste zum Teilen
|
Dieser Artikel zeigt eine mit nativem JS implementierte Sharing-Seitenleiste. Der Effekt ist wie folgt:
Nachfolgend finden Sie die Codeimplementierung, die Sie bequem kopieren und einfügen können.
<!DOCTYPE html>
<html>
<head lang="de">
<meta charset="UTF-8">
<title>Mit Wirkung teilen</title>
<Stil>
#Aktie {
Position: fest;
Breite: 100px;
Höhe: 200px;
Hintergrundfarbe: hellblau;
links: -100px;
oben: 100px;
}
#Spanne teilen {
Breite: 20px;
Höhe: 60px;
Zeilenhöhe: 20px;
Textausrichtung: zentriert;
links: 100px;
oben: 70px;
Position: absolut;
Hintergrundfarbe: gelb;
}
</Stil>
</Kopf>
<Text>
<div id="teilen">
<span>Teilen mit</span>
</div>
<Skript>
//Element abrufen var share = document.getElementById("share");
// Legen Sie das zu teilende Ereignis fest
teilen.onmouseover = Funktion () {
animieren(dies, "links", 0);
};
teilen.onmouseout = Funktion () {
animieren(dies, "links", -100);
};
// Bewegungsfunktion animieren function animate(tag, attr, target) {
clearInterval(tag.timer);
tag.timer = setzeIntervall(Funktion () {
// Den aktuellen Status eines Attributs abrufen // Da es Einheiten hat, muss es gerundet werden // parseInt("hehe") => NaN NaN || 0
// Um das Problem der automatischen Konvertierung in NaN zu lösen, verwenden wir eine Kurzschlussoperation, um die Robustheit des Programms sicherzustellen var leader = parseInt(getStyle(tag, attr)) || 0;
// Ein Teil der Easing-Formel ist die Änderung des Schrittwerts var step = (Ziel – Leader) / 10;
// Da offsetLeft beim Erfassen der Werte gerundet wird, führt ein relativ kleiner Schritt zu Problemen bei der Bewegung. // Ändern Sie die Rundungsmethode entsprechend der positiven oder negativen Schrittzahl. step = step > 0 ? Math.ceil(step) : Math.floor(step);
// Easing-Formel Leader = Leader + Schritt;
// Auf ein bestimmtes Attribut setzen tag.style[attr] = leader + "px";
//Überprüfen Sie, ob Sie die angegebene Position erreicht haben, if (leader == target) {
clearInterval(tag.timer);
}
}, 17);
}
// Wird verwendet, um den Stilattributwert eines Tags abzurufen // mit der Unit-Funktion getStyle(tag, attr) {
// Prüfen Sie, welches unterstützt wird // box.currentStyle, wenn es nicht existiert, ist der Wert undefiniert
// getComputedStyle, wenn der Browser es nicht unterstützt. Dies ist gleichbedeutend damit, dass eine Variable nicht deklariert wird und ein Fehler gemeldet wird, wenn (tag.currentStyle) {
// dh unterstützt return tag.currentStyle[attr];
} anders {
// Standardmethode return getComputedStyle(tag, null)[attr];
}
}
</Skript>
</body>
</html>Das Obige ist der vollständige Inhalt dieses Artikels. Ich hoffe, er wird für jedermanns Studium hilfreich sein. Ich hoffe auch, dass jeder 123WORDPRESS.COM unterstützen wird. Das könnte Sie auch interessieren:
|
<<: Warum MySQL das Löschen von Daten nicht empfiehlt
>>: Tutorial zu HTML-Tabellen-Tags (31): Breiten- und Höhenattribute für Zellen WIDTH, HEIGHT
Artikel empfehlen
Implementieren Sie eine MaterialUI-Button-Klickanimation auf Basis von CSS und kapseln Sie sie in eine React-Komponente ein.
Vorwort Als intensiver Benutzer von Front-End-Fra...
Detaillierte Erklärung des CSS3-Rotationswürfelproblems
3D-Koordinatenkonzept Wenn sich ein Element dreht...
Implementierung der Leistungsoptimierung des Element-Shuttle-Frames
Inhaltsverzeichnis Hintergrund Lösung Neue Fragen...
Detaillierte grafische Beschreibung des Datenbankinstallationsprozesses der MySQL-Version 5.7.24
MySQL ist das beliebteste relationale Datenbankma...
Vergleich zwischen Node.js und Deno
Inhaltsverzeichnis Vorwort Was ist Deno? Vergleic...
Mehrere Möglichkeiten, die Lesbarkeit von Webseiten zu verbessern
1. Verwenden Sie kontrastierende Farben. Mit Kont...
Erfahren Sie mehr über den Ereignisplaner EVENT in MySQL
Der Ereignisplaner in MySQL, EVENT, wird auch als...
So implementieren Sie den Selbststart eines Docker-Containers
Container-Autostart Docker bietet einen Neustartr...
Die Bedeutung des Statuscodes im HTTP-Protokoll
Ein Statuscode, der eine vorläufige Antwort anzei...
CSS Zurück zum Anfang Codebeispiel
Die meisten Websites haben heutzutage lange Seite...
Detailliertes Tutorial zum Festlegen des Passworts für die kostenlose MySQL-Installationsversion
Methode 1: Verwenden Sie den Befehl SET PASSWORD ...
So installieren Sie PostgreSQL und PostGIS mit yum auf CentOS7
1. Aktualisieren Sie die Yum-Quelle Die PostgreSQ...
Drei Möglichkeiten zum Konfigurieren einer JNDI-Datenquelle in Tomcat
In meiner früheren Arbeit war der Entwicklungsser...
Führen Sie die Schritte zur Verwendung von mock.js im Vue-Projekt aus
Verwenden von mock.js im Vue-Projekt Auswahl des ...
Lösen Sie das Problem ungültiger UTF8-Einstellungen in MySQL 5.6
Nach der Dekomprimierung der grünen Version von m...