HTML + CSS + JS-Beispielcode zur Nachahmung des Helligkeitsanpassungseffekts von Win10

HTML + CSS + JS-Beispielcode zur Nachahmung des Helligkeitsanpassungseffekts von Win10

HTML + CSS + JS imitieren den Helligkeitsanpassungseffekt von Win10

Code

<!doctype html>
<html>
	<Kopf>
		<meta charset="utf-8">
		<title>Helligkeitsanpassung von Win10 imitieren</title>
		<Stil>
			.Steuerleiste{
				Höhe: 200px;
				Breite: 500px;
				Rahmen unten: 3px durchgezogen #888888;
				
			}
			.control_bar_cursor{
				Höhe: 25px;
				Breite: 8px;
				Hintergrund: #505151;
				Rahmenradius: 5px;
				Rand oben: -12,5px;
				Position: relativ;
				oben: 0;
				links: 0;
			}
			.control_bar_cursor:hover{
				Hintergrund: weiß;
			}
			#Kontrollleistenmaske{
				Rand oben: -203px;
				Breite: 0px;
			}
			.Maske{
				Position: fest;
				unten: 0;
				oben: 0;
				links: 0;
				rechts:0;
				Hintergrund: schwarz;
				z-Index: -1;
			}
		</Stil>
	</Kopf>
	<Text>
		<div Klasse="Maske"></div>
		<div Klasse="Steuerleiste"></div>
		<div Klasse = "control_bar" Stil = "border-bottom:3px solid #505151;"
		<div Klasse="Control_Bar_Cursor"></div>
	</body>
	<Skript>
		fenster.onload = funktion(){
			var Kontrollleiste = document.getElementsByClassName("Kontrollleiste")[0];
			var control_bar_mask = document.getElementById("control_bar_mask");
			var control_bar_cursor = document.getElementsByClassName("control_bar_cursor")[0];
			var def_left = control_bar_cursor.offsetLeft;
			var Maske = document.getElementsByClassName("Maske")[0];
			Dokument.Body.onmousedown = Funktion(){
				Fenster.onmousemove = function(){
					var cursor_X = event.clientX;
					var cursor_Y = event.clientY;
					wenn(cursor_X < def_left){
						control_bar_cursor.style.left = 0;
					}sonst wenn(cursor_X > control_bar.offsetWidth + def_left){
						control_bar_cursor.style.left = control_bar.offsetWidth;
					}anders{
						control_bar_cursor.style.left = Cursor_X – def_left + "px";
					}
					//Helligkeitsverhältnis var proportion = parseInt(control_bar_cursor.offsetLeft - def_left) / parseInt(control_bar.offsetWidth - 1);
					control_bar_mask.style.width = Proportion * control_bar.offsetWidth + "px";
					mask.style.opacity = 1 – Proportion;
					};
				Fenster.onmouseup = function(){
					Fenster.onmousemove = null;
				};
			};
		};
	</Skript>
</html>

1. Notieren Sie das Aussehen jedes Elements

Hier wird dem Körper zur leichteren Betrachtung eine Hintergrundfarbe hinzugefügt.

html

<div Klasse="Steuerleiste">
</div>
<div Klasse = "Control_Bar" Stil = "Bordüre-Boden: 3px durchgezogen #505151;"  
id="Kontrollleistenmaske>
</div>
<div Klasse="Steuerleistencursor">
</div>

CSS

Körper{
    Hintergrund: zurück;
}
.Steuerleiste{
    Höhe: 200px;
    Breite: 500px;
    Rahmen unten: 3px durchgezogen #888888;
}
.control_bar_cursor{
    Höhe: 25px;
    Breite: 8px;
    Hintergrund: #505151;
    Rahmenradius: 5px;
}

Rendern

2. Stapeln Sie die Elemente zusammen

CSS

Körper{
    Hintergrund: schwarz;
}
.Steuerleiste{
    Höhe: 200px;
    Breite: 500px;
    Rahmen unten: 3px durchgezogen #888888;

}
.control_bar_cursor{
    Höhe: 25px;
    Breite: 8px;
    Hintergrund: #505151;
    Rahmenradius: 5px;
    Rand oben: -12,5px;
    Position: relativ;
    oben: 0;
    links: 0;
}
.control_bar_cursor:hover{
    Hintergrund: weiß;
}
#Kontrollleistenmaske{
    Rand oben: -203px;
    Breite: 100px;
}

Um den Maskeneffekt anzuzeigen, wird die Div-Breite der Maskenebene kleiner eingestellt.

3. Fügen Sie js hinzu

js

fenster.onload = funktion(){
    var Kontrollleiste = document.getElementsByClassName("Kontrollleiste")[0];
    var control_bar_mask = document.getElementById("control_bar_mask");
    var control_bar_cursor = document.getElementsByClassName("control_bar_cursor")[0];
    var def_left = control_bar_cursor.offsetLeft;
    Dokument.Body.onmousedown = Funktion(){
        Fenster.onmousemove = function(){
            var cursor_X = event.clientX;
            var cursor_Y = event.clientY;
            wenn(cursor_X < def_left){
                control_bar_cursor.style.left = 0;
            }sonst wenn(cursor_X > control_bar.offsetWidth + def_left){
                control_bar_cursor.style.left = control_bar.offsetWidth;
            }anders{
                control_bar_cursor.style.left = Cursor_X – def_left + "px";
            }
            var Anteil = parseInt(control_bar_cursor.offsetLeft - def_left) / parseInt(control_bar.offsetWidth - 1);
            control_bar_mask.style.width = Proportion * control_bar.offsetWidth + "px";
        };
        Fenster.onmouseup = function(){
            Fenster.onmousemove = null;
        };
    };
};

4. Fügen Sie eine Maske hinzu und steuern Sie deren Transparenz mit der Steuerleiste, um einen Helligkeitsanpassungseffekt zu erzielen

<div Klasse="Maske"></div>
.Maske{
    Position: fest;
    unten: 0;
    oben: 0;
    links: 0;
    rechts:0;
    Hintergrund: schwarz;
    z-Index: -1;
}
fenster.onload = funktion(){
    var Kontrollleiste = document.getElementsByClassName("Kontrollleiste")[0];
    var control_bar_mask = document.getElementById("control_bar_mask");
    var control_bar_cursor = document.getElementsByClassName("control_bar_cursor")[0];
    var def_left = control_bar_cursor.offsetLeft;
    var Maske = document.getElementsByClassName("Maske")[0];
    Dokument.Body.onmousedown = Funktion(){
        Fenster.onmousemove = function(){
            var cursor_X = event.clientX;
            var cursor_Y = event.clientY;
            wenn(cursor_X < def_left){
                control_bar_cursor.style.left = 0;
            }sonst wenn(cursor_X > control_bar.offsetWidth + def_left){
                control_bar_cursor.style.left = control_bar.offsetWidth;
            }anders{
                control_bar_cursor.style.left = Cursor_X – def_left + "px";
            }
            //Helligkeitsverhältnis var proportion = parseInt(control_bar_cursor.offsetLeft - def_left) / parseInt(control_bar.offsetWidth - 1);
            control_bar_mask.style.width = Proportion * control_bar.offsetWidth + "px";
            mask.style.opacity = 1 – Proportion;
        };
        Fenster.onmouseup = function(){
            Fenster.onmousemove = null;
        };
    };
};

Zusammenfassen

Damit ist dieser Artikel über den Beispielcode für HTML+CSS+JS zur Nachahmung des Helligkeitsanpassungseffekts von Win10 abgeschlossen. Weitere relevante Inhalte zur Helligkeitsanpassung von HTML/CSS/Win10 finden Sie in den vorherigen Artikeln von 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, dass alle 123WORDPRESS.COM in Zukunft unterstützen werden!

<<:  Implementierungsmethoden gängiger CSS3-Animationen

>>:  Detaillierte Konfiguration des mysql8.x-Docker-Remotezugriffs

Artikel empfehlen

Der Unterschied und die Verwendung des Kommunikationsbusses der Bruderkomponenten von Vue2 und Vue3

Inhaltsverzeichnis vue2.x vue3.x Verwendung des T...

HTML+CSS zum Erreichen eines Surround-Reflexionsladeeffekts

In diesem Artikel wird hauptsächlich die Implemen...

Implementierungsprinzip und Prozessanalyse der TCP-Leistungsoptimierung

Drei-Wege-Handshake-Phase Anzahl der Wiederholung...

Detaillierte Erläuterung der Apache-Website-Dienstkonfiguration basierend auf Linux

Als Open-Source-Software ist Apache eine der am h...

Was genau passiert im Hintergrund, wenn Sie eine URL eingeben?

Als Softwareentwickler müssen Sie über ein vollst...

CSS-Float-Eigenschaftsdiagramm, Details der Float-Eigenschaft

Die korrekte Verwendung der CSS-Float-Eigenschaft...

Verwenden Sie HTML und CSS, um Ihren eigenen warmen Mann „Dabai“ zu erstellen.

Das Endergebnis sieht so aus, ist es nicht süß … ...

CSS Lieferadresse Parallelogramm Linienstil Beispielcode

Der Code sieht folgendermaßen aus: // Linienstil ...

Lösung für den Fehler beim Starten von MySQL

Lösung für den Fehler beim Starten von MySQL MySQ...

Mehrere Möglichkeiten zum Übergeben von Daten von übergeordneten Komponenten an untergeordnete Komponenten in Vue

Ich habe kürzlich den Quellcode von Vue studiert ...

docker run -v mountet Datenvolumes abnormal und der Containerstatus wird immer neu gestartet

Symptome: Nach dem Hinzufügen des Parameters -v z...

Tutorial-Diagramm zum Erstellen eines Hadoop-Hochverfügbarkeitsclusters basierend auf ZooKeeper

Inhaltsverzeichnis 1. Einführung in Hochverfügbar...

So beheben Sie den abnormalen Start von mysql5.7.21

Ein Kollege meldete, dass eine MySQL-Instanz aufg...

So reduzieren Sie die Bildgröße mithilfe des mehrstufigen Docker-Builds

In diesem Artikel wird beschrieben, wie Sie die m...

Vue.js implementiert den Code zum Klicken auf das Symbol zum Vergrößern und Verlassen

Im vorherigen Artikel wurde vorgestellt, wie Vue ...