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
Implementierung der Docker-Container-Verbindung und -Kommunikation
Die Portzuordnung ist nicht die einzige Möglichke...
Eine kurze Diskussion über die Verwendung von Vue zur Fertigstellung des mobilen APK-Projekts
Inhaltsverzeichnis Grundkonfiguration Eintragsdat...
Zusammenfassung der Erfahrungen und Fähigkeiten von Webdesignern beim Erlernen von Webdesign
Da der Einfluss des Unternehmens wächst und seine...
Lösen Sie das Problem, dass bei der Set-Operation kein NULL gefunden wird, nicht wie bei MySQL
Eine interessante Entdeckung: Es gibt eine Tabell...
Detaillierte Erläuterung der Lösung für npm ls-Fehler, die durch das fsevents-Modul unter Linux verursacht werden
Es gibt ein auf dem Mac entwickeltes Projekt, das...
Verwenden Sie Schaltflächenauslöserereignisse, um einen blinkenden Hintergrundfarbeffekt zu erzielen
Um den blinkenden Hintergrundfarbeffekt zu erziele...
Anmeldevorgang für das Python Flask WeChat-Applet und Implementierungscode der Anmelde-API
1. Schauen wir uns zunächst die Wirkung an Von de...
So installieren Sie das Modul „lua-nginx-module“ in Nginx
ngx_lua_module ist ein Nginx-HTTP-Modul, das den ...
Verwenden von react-beautiful-dnd zum Implementieren von Drag & Drop zwischen Listen
Inhaltsverzeichnis Warum react-beautiful-dnd wähl...
HTML implementiert die Funktion zur Erkennung der Eingabevervollständigung
Verwenden Sie „onInput(event)“, um festzustellen,...
Tutorial-Analyse der Schnellinstallation von mysql5.7 basierend auf centos7
eins. wget https://dev.mysql.com/get/mysql57-comm...
VMware12.0-Installation Ubuntu14.04 LTS-Tutorial
Ich habe verschiedene Images sowohl unter virtuel...
MySQL-Ansichtsprinzipien und grundlegende Bedienungsbeispiele
Dieser Artikel veranschaulicht anhand von Beispie...
Document Object Model (DOM) in JavaScript
Inhaltsverzeichnis 1. Was ist DOM 2. Elemente aus...
JS implementiert den Beispielcode der Dezimalkonvertierung in Hexadezimal
Vorwort Beim Schreiben von Code stoßen wir gelege...