Natives JS zum Erzielen von Jalousie-Spezialeffekten
|
In diesem Artikel wird ein Jalousie-Spezialeffekt beschrieben, der mit nativem JS implementiert wurde. Der Effekt ist wie folgt:
Die Codeimplementierung ist wie folgt, Sie können sie gerne kopieren und einfügen.
<!DOCTYPE html>
<html>
<Kopf>
<meta http-equiv="Inhaltstyp" content="text/html; charset=utf-8" />
<title>Natives JS zum Erzielen von Jalousie-Spezialeffekten</title>
<Stil>
* {
Rand: 0;
Polsterung: 0;
}
li {
Listenstil: keiner;
}
A {
Textdekoration: keine;
}
#Kasten {
Breite: 562px;
Polsterung: 10px 24px 20px;
Hintergrund: #EACFCF;
Überlauf: versteckt;
Rand: 20px auto 0;
}
.links {
Breite: 266px;
schweben: links;
}
.Rechts {
Breite: 266px;
schweben: rechts;
}
#box h2 {
Höhe: 38px;
Rahmen unten: 1px durchgezogen #D2A1A1;
Polsterung links: 20px;
}
#box h2 stark {
schweben: links;
Zeilenhöhe: 38px;
Farbe: #885050;
Schriftstärke: normal;
}
#box h2 a {
schweben: rechts;
Breite: 52px;
Höhe: 14px;
Schriftgröße: 12px;
Texteinzug: 10px;
Farbe: #fff;
Zeilenhöhe: 12px;
Schriftstärke: normal;
Rand oben: 10px;
}
#box li {
Höhe: 30px;
Position: relativ;
Rahmen unten: 1px gestrichelt #D1A1A1;
}
#box li div,
#Boxlippe {
Höhe: 30px;
Position: absolut;
oben: 0;
links: 0;
Breite: 100 %;
}
#Boxlippe {
Hintergrund: #fff;
Deckkraft: 0;
Filter: Alpha (Deckkraft = 0);
}
#box li div a,
#box li div span {
Zeilenhöhe: 30px;
Schriftgröße: 12px;
Höhe: 30px;
}
#box li div a {
schweben: links;
Polsterung links: 20px;
Farbe: #7F5454;
Breite: 172px;
Überlauf: versteckt;
}
#box li div span {
Polsterung rechts: 10px;
schweben: rechts;
Farbe: #CF9494;
}
</Stil>
<Skripttyp="text/javascript">
fenster.onload = Funktion () {
var oBox = document.getElementById("box");
var aLi = document.getElementsByTagName('li');
var i = 0;
für (i = 0; i < aLi.Länge; i++) {
var oP = aLi[i].getElementsByTagName('p')[0];
oP.iAlpha = 0;
oP.Zeit = null;
aLi[i].onmouseover = Funktion () {
var oP = this.getElementsByTagName('p')[0];
oP.time ? clearInterval(oP.time) : "";
oP.style.opacity = 1;
oP.style.filter = "Alpha(Deckkraft=100)";
oP.iAlpha = 100;
}
aLi[i].onmouseout = Funktion () {
Sternbewegung(this.getElementsByTagName('p')[0]);
};
}
};
Funktion starmove(obj) {
obj.time ? clearInterval(obj.time) : "";
obj.Zeit = Intervall festlegen(Funktion () { domove(obj); }, 14);
}
Funktion domove(Objekt) {
var iSpeed = 5;
wenn (Objekt.iAlpha <= iSpeed) {
Intervall löschen(Objekt.Zeit);
obj.iAlpha = 0;
obj.zeit = null;
} anders {
obj.iAlpha -= iSpeed;
}
obj.style.opacity = obj.iAlpha / 100;
obj.style.filter = "alpha(opacity=" + obj.iAlpha + ")";
}
</Skript>
</Kopf>
<Text>
<div id="box">
<div Klasse="links">
<h2>
<strong>Aktuelle Nachrichten</strong>
<a>mehr</a>
</h2>
<ul>
<li>
<p></p>
<div>
<a>Häufig gestellte Fragen zum Kurs</a>
<span>20110329</span>
</div>
</li>
<li>
<p></p>
<div>
<a>Kriterien für den Abschluss des JS-Kurses</a>
<span>20110327</span>
</div>
</li>
<li>
<p></p>
<div>
<a>Webeffekt-Sammlung (täglich aktualisiert)</a>
<span>20110322</span>
</div>
</li>
<li>
<p></p>
<div>
<a>Unterrichtsort</a>
<span>20110319</span>
</div>
</li>
<li>
<p></p>
<div>
<a>Späteste Startzeit des CSS-Kurses</a>
<span>20110319</span>
</div>
</li>
<li>
<p></p>
<div>
<a>Neuester Startzeitpunkt des JavaScript-Kurses</a>
<span>20110319</span>
</div>
</li>
<li>
<p></p>
<div>
<a>Webdesign-Grundkurs</a>
<span>20110319</span>
</div>
</li>
</ul>
</div>
<div Klasse="rechts">
<h2>
<strong>Was ist neu</strong>
<a>mehr</a>
</h2>
<ul>
<li>
<p></p>
<div>
<a>3D-sphärischer Tag-Cloud-Effekt, implementiert durch JavaScript</a>
<span>20110329</span>
</div>
</li>
<li>
<p></p>
<div>
<a>Live-Aufzeichnung des JavaScript-Meetups vom Samstag</a>
<span>20110327</span>
</div>
</li>
<li>
<p></p>
<div>
<a>Fragen zum Ali-Frontend-Interview</a>
<span>20110319</span>
</div>
</li>
<li>
<p></p>
<div>
<a>Kurze Analyse der Implementierungsprinzipien des Google Maps-Frontends (Teil 1)</a>
<span>20110319</span>
</div>
</li>
<li>
<p></p>
<div>
<a>Hausaufgabenübung zum Windows-Rechner (vereinfachte Version)</a>
<span>20110319</span>
</div>
</li>
<li>
<p></p>
<div>
<a>Akkordeon-Lockerungseffekt</a>
<span>20110319</span>
</div>
</li>
<li>
<p></p>
<div>
<a>3D-sphärischer Tag-Cloud-Effekt, implementiert durch JavaScript</a>
<span>20110319</span>
</div>
</li>
</ul>
</div>
</div>
</body>
</html>Das Obige ist der vollständige Inhalt dieses Artikels. Ich hoffe, er wird für jedermanns Studium hilfreich sein. Ich hoffe auch, dass jeder 123WORDPRESS.COM unterstützen wird. Das könnte Sie auch interessieren:
|
<<: Tutorial zur HTML-Tabellenauszeichnung (5): Farbattribut für helle Rahmen BORDERCOLORLIGHT
>>: Detaillierte Erklärung zur Abfrage von Feldern, die „%“ enthalten, in MySQL (ESCAPE-Verwendung)
![Beispielanalyse langsamer MySQL-Abfragevorgänge [Aktivieren, Testen, Bestätigen usw.]](/upload/images/67cad8bac8146.webp)
Artikel empfehlen
Detailliertes Tutorial zum Minimieren der Installation der virtuellen CentOS 8.1-Maschine in VirtualBox
1. Laden Sie zugehörige Tools und Bilder herunter...
Detaillierte Erläuterung der Verwendung der Vue3-Statusverwaltung
Inhaltsverzeichnis Hintergrund Bereitstellen / In...
Detaillierte Erläuterung der MySQL Master-Slave-Replikationspraxis - GTID-basierte Replikation
GTID-basierte Replikation Einführung Die GTID-bas...
Einführung in Kubernetes (k8s)
Ich wollte schon immer Kubernetes lernen, weil es...
Warum kann MySQL bei der Verwendung von Zeitstempeln Zeitzonenprobleme ignorieren?
Ich habe mich immer gefragt, warum der timestamp ...
Lösung für die Meldung „Die exklusive Sperre dieser Konfigurationsdatei ist fehlgeschlagen“ auf der virtuellen VMware-Maschine
Nach einem abnormalen Herunterfahren von VMware w...
Vue-Kapselungskomponententool $attrs, $listeners-Verwendung
Inhaltsverzeichnis Vorwort $attrs Beispiel: $list...
So erstellen Sie einen vollständigen Samba-Server unter Linux (CentOS-Version)
Vorwort smb ist der Name eines Protokolls, das fü...
Lösung für das Problem, dass der MySQL-Dienst unter Windows nicht gestoppt oder gelöscht werden kann
Ich habe MySQL unter Windows installiert, indem i...
So installieren Sie eine ISO-Datei im Linux-System
Wie installiere ich ISO-Dateien unter einem Linux...
So stellen Sie ein Vue-Projekt mit Docker-Image + nginx bereit
1. Vue-Projekt verpacken Geben Sie den folgenden ...
Nginx: Lernen, wie man einen Dienst zum Schutz von Datei-Hotlinks erstellt – Beispiel
Vorwort Jeder weiß, dass viele Websites mittlerwe...
So stellen Sie gelöschte MySQL 8.0.17-Root-Konten und Passwörter unter Windows wieder her
Ich habe vor Kurzem mein SQL-Lernen beendet und M...
Einführung in MySQL-Trigger, Erstellen von Triggern und Analyse von Nutzungsbeschränkungen
Dieser Artikel beschreibt anhand von Beispielen d...
Detaillierte Erklärung des Typschutzes in TypeScript
Inhaltsverzeichnis Überblick Typzusicherungen in ...