js realisiert horizontale und vertikale Slider
|
Als ich kürzlich an einem Übungsprojekt arbeitete, musste ich einen Schieberegler verwenden und habe daher ein wenig dazu recherchiert. Schauen wir uns zunächst den horizontalen Schieberegler an. Der Effekt ist wie folgt:
Der Code lautet wie folgt:
<html>
<Kopf>
<meta charset="UTF-8">
<title>Horizontaler Schieberegler</title>
<Stil>
* {
Rand: 0;
Polsterung: 0;
}
.scroll {
Rand: 100px;
Breite: 500px;
Höhe: 5px;
Hintergrund: #ccc;
Position: relativ;
}
.Bar {
Breite: 10px;
Höhe: 20px;
Hintergrund: #369;
Position: absolut;
oben: -7px;
links: 0;
Cursor: Zeiger;
}
P{
Rand links: 100px;
}
</Stil>
</Kopf>
<Text>
<div Klasse="scrollen" id="scrollen">
<div Klasse="Bar" id="Bar">
</div>
</div>
<p></p>
<Skript>
//Element abrufen var scroll = document.getElementById('scroll');
var bar = document.getElementById('bar');
var ptxt = document.getElementsByTagName('p')[0];
bar.onmousedown = Funktion(Ereignis) {
var Ereignis = Ereignis || Fenster.Ereignis;
// X des Seitenereignisses minus des aktuell positionierten Elements relativ zum nächsten Vorgänger var x = event.clientX - this.offsetLeft;
document.onmousemove = Funktion(Ereignis) {
var Ereignis = Ereignis || Fenster.Ereignis;
var left = event.clientX - x;
wenn (links < 0)
links = 0;
sonst wenn (links > scroll.offsetWidth - bar.offsetWidth) {
links = Scroll-Offsetbreite – Balken-Offsetbreite;
}
//Ändern Sie die linke Position des Schiebereglers
bar.style.left = links + "px";
ptxt.innerHTML = "Der Prozentsatz der Bewegung des aktuellen Schiebereglers: " + parseInt(left / (scroll.offsetWidth - bar.offsetWidth) * 100) + "%";
//Auswahl verhindern window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();
}
}
//Wenn die Maus hochspringt, nichts tun document.onmouseup = function() {
Dokument.onmousemove = null;
}
</Skript>
</body>
</html>Der vertikale Schieberegler hat folgenden Effekt:
Der Code lautet wie folgt:
<html>
<Kopf>
<meta charset="UTF-8">
<title>Vertikale Schiebeleiste</title>
<Stil>
* {
Rand: 0;
Polsterung: 0;
}
.scrollen{
Rand: 100px;
Breite: 5px;
Höhe: 320px;
Hintergrund: #ccc;
Position: relativ;
}
.Bar {
Breite: 15px;
Höhe: 5px;
Hintergrund: #369;
Position: absolut;
oben: 0px;
links: -5;
Cursor: Zeiger;
}
P{
Rand links: 100px;
}
</Stil>
</Kopf>
<Text>
<div Klasse="scrollen" id="scrollen">
<div Klasse="Bar" id="Bar">
</div>
</div>
<p></p>
<Skript>
//Element abrufen var scroll = document.getElementById("scroll");
var bar = document.getElementById("bar");
var ptxt = document.getElementsByTagName('p')[0];
//Ereignis hinzufügen bar.onmousedown = function(event) {
var Ereignis = Ereignis || Fenster.Ereignis;
//Das Y des Seitenereignisses minus des aktuell positionierten Elements relativ zum nächsten Vorgänger var y = event.clientY - this.offsetTop;
//Drag muss nach unten geschrieben werden document.onmousemove = function(event) {
var Ereignis = Ereignis || Fenster.Ereignis;
//Bewegungsdistanz abrufen var top = event.clientY - y;
wenn (oben < 0){
oben = 0;
}
sonst wenn (oben > scroll.offsetHeight - bar.offsetHeight){
oben = Scroll-Offset-Höhe – Balken-Offset-Höhe;
}
//Ändern Sie die Oberseite des Schiebereglers
bar.style.top = oben + "px";
// Aktuelle Gleitdistanz in Prozent abrufen ptxt.innerHTML = "Der aktuelle Prozentsatz der Bewegung des Schiebereglers: " + parseInt(top/(scroll.offsetHeight - bar.offsetHeight) * 100) + "%";
//Auswahl verhindern window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();
}
}
//Wenn die Maus hochspringt, nichts tun document.onmouseup = function() {
Dokument.onmousemove = null;
}
</Skript>
</body>
</html>Der Grund, warum der Effekt der gleitenden Prozentanzeige hier hinzugefügt wird, besteht hauptsächlich darin, den Zweck der dynamischen Steuerung zu erreichen, wenn in Zukunft eine Verbindung mit den Hintergrunddaten erforderlich ist. 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:
|
<<: Zusammenfassung der Wissenspunkte zu Null in der MySQL-Datenbank
>>: Unterschied und Prinzipanalyse des Nginx-Forward- und Reverse-Proxy
Artikel empfehlen
Perfekte Lösung für das Problem, dass Navicat nach der Installation von MySQL im Docker keine Verbindung herstellen kann
1. Docker zieht das Image Docker Pull MySQL (stan...
Beschreiben Sie kurz die MySQL InnoDB-Speicher-Engine
Vorwort: Die Speicher-Engine ist der Kern der Dat...
So fügen Sie einem Hintergrundbild in CSS3 eine Farbmaske hinzu
Vor einiger Zeit stieß ich während der Entwicklun...
js-Code, der den Button mit der Eingabetaste verknüpft
Code kopieren Der Code lautet wie folgt: <html...
So generieren Sie eine Vue-Benutzeroberfläche per Drag & Drop
Inhaltsverzeichnis Vorwort 1. Technisches Prinzip...
Beschreiben Sie kurz die Verwendung und Beschreibung des MySQL-Primärschlüssels und des Fremdschlüssels
Inhaltsverzeichnis 1. Fremdschlüsseleinschränkung...
js, um einen interessanten Countdown-Effekt zu erzielen
js interessanter Countdown-Fall. Zu Ihrer Informa...
So installieren Sie MySQL für Anfänger (erwiesenermaßen effektiv)
1. Software-Download MySQL-Download und -Installa...
So verwenden Sie Docker zum Erstellen eines Tomcat-Clusters mit Nginx (mit Bildern und Text)
Erstellen Sie zunächst einen Tomcat-Ordner. Um di...
HTML ungeordnete Liste Aufzählungspunkte mit Bildern CSS schreiben
Erstellen Sie eine HTML-Seite mit einer ungeordnet...
Einführung in die Fallstricke der hohen Parallelität und Leistungsoptimierung unter Linux
Inhaltsverzeichnis Vorwort Analyse und Lösung des...
So zeigen Sie historische Befehle in Linux an und führen sie aus
Historische Befehle anzeigen und bestimmte Befehl...
Zusammenfassung der CSS-Farbverlaufseffekte (linearer Farbverlauf und radialer Farbverlauf)
Linearer Farbverlauf Hintergrundbild: linearer Fa...
Lösungsbeispiel und Erklärung für Fehler beim Importieren und Exportieren von Daten in MySQL-Datenbanken
Daten exportieren Einen Fehler melden VARIABLEN W...
Detaillierte Erklärung des in JavaScript integrierten Date-Objekts
Inhaltsverzeichnis Date-Objekt Erstellen eines Da...