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

So umbrechen Sie das HTML-Titelattribut

Als ich vor ein paar Tagen ein Programm schrieb, w...

dh Filtersammlung

Der IE hat uns in der frühen Entwicklungsphase Ko...

MySQL Master-Slave-Synchronisation, Implementierungsprinzip des Transaktions-Rollbacks

BinLog BinLog ist ein Binärprotokoll, das alle Än...

Detaillierte Analyse der SQL-Ausführungsschritte

Detaillierte Analyse der SQL-Ausführungsschritte ...

Lösung für das Problem der automatischen Wiederherstellung nach der Änderung von server.xml und content.xml in Tomcat

Schreiben Sie Konfigurationsdateien in server.xml...

Schritte zum Ändern des MySQL-Zeichensatzes auf UTF8 unter Linux

Inhaltsverzeichnis 1. Überprüfen Sie den MySQL-St...

Ändern Sie den Stil des HTML-Textkörpers in JS

Inhaltsverzeichnis 1. Ursprüngliche Definition 2....

JavaScript zum Erzielen eines benutzerdefinierten Bildlaufleisteneffekts

In tatsächlichen Projekten befinden sich die Bild...

Verschiedene Möglichkeiten zum Ändern der Hintergrundbildfarbe mit CSS3

CSS3 kann die Farbe von Bildern ändern. Ab sofort...

Implementierungsschritte zum Einrichten der React+Ant Design-Entwicklungsumgebung

Grundlagen 1. Verwenden Sie Scaffolding, um ein P...

Nginx implementiert dynamische und statische Trennung Beispielerklärung

Um das Parsen der Website zu beschleunigen, könne...

So konfigurieren Sie /var/log/messages im Ubuntu-Systemprotokoll

1. Problembeschreibung Heute muss ich die Systemp...

XHTML-Einführungstutorial: Textformatierung und Sonderzeichen

<br />Dieser Abschnitt stellt die Implementi...

Lösung für das Problem, dass der Bridge-Modus der virtuellen Maschine von VMware15 nicht auf das Internet zugreifen kann

Beschreibung Lösung Der Bridge-Modus der virtuell...

Was ist dies in einer Punkt-für-Punkt-Reihe von JavaScript?

Verstehe das Vielleicht haben Sie this in anderen...