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

Beispiele für JavaScript-Operationselemente

Weitere Informationen zu Bedienelementen finden S...

Detaillierte Erläuterung der Idee, mysql8.0.11 zu installieren, das Root-Passwort zu ändern und Navicat für MySQL zu verbinden

1.1. Herunterladen: Laden Sie das Zip-Paket von d...

Mysql SQL-Anweisungskommentare

Sie können MySQL-SQL-Anweisungen Kommentare hinzu...

Vue+Openlayer verwendet modify, um den gesamten Code des Elements zu ändern

Vue+Openlayer verwendet „modify“, um Elemente zu ...

Die v-for-Direktive in Vue vervollständigt die Listendarstellung

Inhaltsverzeichnis 1. Listendurchlauf 2. Die Roll...

Hinweise zum Import, Export und zur Migration von MySQL Billions of Data

Ich habe in letzter Zeit viele MySQL-Notizen gema...

Verwendung und Analyse des Mysql Explain-Befehls

Mit dem Befehl „mysql explain“ wird gezeigt, wie ...

Einführung in die Vue3 Composition API

Inhaltsverzeichnis Überblick Beispiel Warum wird ...

So lösen Sie das Problem der langsamen Geschwindigkeit von MySQL wie bei Fuzzy-Abfragen

Frage: Warum ist die Like-Fuzzy-Abfrage immer noc...

Der Prozess der Installation von Docker auf Windows Server 2016 und die aufgetretenen Probleme

Voraussetzungen Um Container auf Windows Server a...

Zusammenfassung der MySQL-Entwicklungsstandards und -Nutzungskenntnisse

1. Namenskonventionen 1. Datenbanknamen, Tabellen...

JS-Code zum Erzielen eines Seitenwechseleffekts

In diesem Artikelbeispiel wird der spezifische Co...

Lösung zur Datenduplizierung bei Verwendung von Limit+Order By in der MySql-Paging

Inhaltsverzeichnis Zusammenfassung Problembeschre...

Beispielcode für die Verwendung von CSS zum Schreiben eines strukturierten Hintergrundbilds mit Farbverlauf

Die Seitenlänge im Projekt beträgt etwa 2000 Pixe...

CSS-Schreibformat, detaillierte Erklärung der Grundstruktur einer mobilen Seite

1. CSS-Schreibformat 1. Inline-Stile Sie können C...