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

Verwenden von MySQL unter Windows: Implementieren automatischer zeitgesteuerter Sicherungen

1. Schreiben Sie ein Backup-Skript rem Autor:www....

Tipps zur MySQL-Leistungsoptimierung

MySQL-Leistungsoptimierung MySQL wird in Internet...

Fallstudie zum Vue-Einkaufswagen

Inhaltsverzeichnis 1. Warenkorb-Beispiel 2. Code-...

Details zur JS-Array-Deduplizierung

Inhaltsverzeichnis 1 Testfälle 2 JS-Array-Dedupli...

MySql schnelles Einfügen von zig Millionen großen Datenbeispielen

Im Bereich der Datenanalyse sind Datenbanken unse...

Dieser Artikel zeigt Ihnen die Grundlagen von JavaScript: Deep Copy und Shallow Copy

Inhaltsverzeichnis Flache Kopie Tiefes Kopieren A...

Analyse der Benutzererfahrung beim Design von Facebook-Dating-Websites

<br />Verwandter Artikel: Analyse der Inform...

5 häufig verwendete Objekte in JavaScript

Inhaltsverzeichnis 1. JavaScript-Objekte 1).Array...

Detaillierte Schritte zum Erstellen eines Dateiservers in Windows Server 2012

Der Dateiserver ist einer der am häufigsten verwe...

So installieren und konfigurieren Sie den SSH-Dienst in Ubuntu 18.04

Installieren Sie das SSH-Tool 1. Öffnen Sie das T...

HTML-Grundlagen - Pflichtlektüre - Detaillierte Erläuterung von Formularen, Bild-Hotspots, Aufteilung und Zusammenfügen von Webseiten

1. Formular <form id="" name="&...

Lösung zum Einfügen eines Formulars mit einer Leerzeile oben und unten

Ich weiß nicht, ob Ihnen beim Erstellen einer Webs...

Lösung für das Problem, dass der Eintrag bei der Installation von mysql5.7.18 nicht gefunden werden kann

Bei der Installation von mysql5.7.18 ist folgende...

So installieren Sie Theano und Keras auf einem Ubuntu-System

Hinweis: Das System ist Ubuntu 14.04LTS, ein 32-B...

Einfache Kapselung von Axios und Beispielcode zur Verwendung

Vorwort Als ich kürzlich ein Projekt erstellte, d...