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
jQuery zum Erreichen des Sperrfeuereffekts
In diesem Artikel wird der spezifische Code von j...
Tiefgreifendes Verständnis der JavaScript-Rückruffunktionen
Inhaltsverzeichnis Vorwort Kurzübersicht: JavaScr...
Grundsätze zur Auswahl von MySQL-Datentypen
Inhaltsverzeichnis Klein aber fein Mach es einfac...
Tutorial zur MySQL-SQL-Optimierung: IN- und RANGE-Abfragen
Lassen Sie uns zunächst über die in()-Abfrage spr...
Ist Ihre Website für IE8 geeignet?
Während der Olympischen Spiele wird IE 8 Beta 2 ve...
HTML-Hyperlinks im Detail erklärt
Hyperlink Hyperlinks sind die am häufigsten verwen...
Probleme bei der Ausführungsreihenfolge von AND und OR in SQL-Anweisungen
Frage Beim Schreiben von Datenbank-SQL ist mir ge...
Zusammenfassung der MySQL-Nutzungsspezifikationen
1. Es muss die InnoDB-Speicher-Engine verwendet w...
Zusammenfassung der Überwachung von Tastaturereignissen durch Vue
Wichtige Modifikatoren Wenn wir auf Tastaturereig...
MySQL-Tabellenfeld Zeiteinstellung Standardwert
Anwendungsszenario In der Datentabelle muss die A...
Grafisches Tutorial zur Installation und Konfiguration von MySQL 5.7.13 (Win10 64 Bit)
In diesem Artikel finden Sie das grafische Tutori...
Mysql NULL verursachte die Grube
Verwenden von NULL in Vergleichsoperatoren mysql&...
So drücken Sie relative Pfade in Linux aus
Wenn Ihr aktueller Pfad beispielsweise /var/log i...
So konfigurieren Sie zwei oder mehr Sites mit dem Apache-Webserver
So hosten Sie zwei oder mehr Sites auf dem belieb...
HTML+CSS zur Realisierung einer einfachen Navigationsleistenfunktion
Ohne weitere Umschweife komme ich gleich zum Code...