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
JavaScript zum Implementieren des Slider-Verifizierungscodes
In diesem Artikel wird der spezifische JavaScript...
React antd realisiert dynamische Vergrößerung und Verkleinerung der Form
Beim Schreiben dynamischer Formulare bin ich zuvo...
Verwenden Sie CSS3, um einen Fortschrittsbalkeneffekt zu erzielen und dynamisch Prozentsätze hinzuzufügen
Während des Projekts habe ich begonnen, die js re...
Detaillierte Erklärung zum Problem der CSS-Klassennamen
Die folgenden CSS-Klassennamen, die mit einer Zah...
Native JS realisiert einheitliche Bewegungen verschiedener Sportarten
In diesem Artikel wird eine einheitliche Bewegung...
Der Unterschied und die Verwendung von Datum/Uhrzeit und Zeitstempel in MySQL
1. Wie wird die aktuelle Uhrzeit in MySQL dargest...
Designtheorie: Warum suchen wir am falschen Ort?
Ich bin vor ein paar Tagen mit dem Bus zur Arbeit...
Ein vorläufiges Verständnis der benutzerdefinierten CSS-Eigenschaften
Heute sind CSS-Präprozessoren der Standard für di...
Detaillierter Prozess zur Verwendung von Vscode in Kombination mit Docker für die Entwicklung
Vorwort Durch die Verwendung von Docker und VS Co...
Detaillierte Erklärung des Unterschieds zwischen Docker-Compose-Ports und Expose
Es gibt zwei Möglichkeiten, Container-Ports in Do...
Super einfache QPS-Statistikmethode (empfohlen)
Statistik der QPS-Werte der letzten N Sekunden (i...
Zusammenfassung und Analyse häufig verwendeter Docker-Befehle und Beispiele
Inhalt 1. Container-Lebenszyklusmanagement (1) Do...
Zusammenfassung einiger Punkte, die bei der Registrierung von Tomcat als Dienst zu beachten sind
Hier sind einige Punkte, die Sie bei der Registri...
mysql bestimmt, ob die aktuelle Zeit zwischen der Start- und Endzeit liegt und ob die Start- und Endzeit leer sein dürfen
Inhaltsverzeichnis Anforderung: Abfrage laufender...
Implementierung der Multisite-Konfiguration von Nginx auf Mac M1
Hinweis: nginx über brew installiert Stammverzeic...