JavaScript-HTML zur Implementierung der mobilen Red Envelope Rain-Funktionsseite
|
In diesem Artikelbeispiel wird der spezifische HTML-Code zur Realisierung der mobilen Red Envelope Rain-Funktionsseite zu Ihrer Information geteilt. Der spezifische Inhalt ist wie folgt Die Wirkung ist wie folgt:
Der spezifische Code lautet wie folgt HTML-Teil: <!DOCTYPE html> <html lang="de"> <Kopf> <meta charset="UTF-8"> <meta name="viewport" content="width=Gerätebreite, Anfangsmaßstab=1.0"> <meta http-equiv="X-UA-kompatibel" content="ie=edge"> <title>Roter Umschlagregen</title> <link rel="stylesheet" href="./css/demo.css" > <link rel="stylesheet" href="./css/index.css" > </Kopf> <Text> <!-- Roter Umschlag --> <ul Klasse="redPaper"> <!-- <li> <a href="#" ><img src="./images/hb_1.png" alt=""></a> </li> --> </ul> <div Klasse="rückwärts"> <span></span> </div> <script src="./js/jquery.min.js"></script> <script src="./js/index.js"></script> <Skript> </Skript> </body> </html> demo.css ist das Initialisierungs-CSS, Sie müssen nicht hinzufügen Abschnitt „index.css“
Körper{
Breite: 100 %;
Höhe: 100%;
Hintergrundbild: URL (../images/bj.jpg);
Hintergrundwiederholung: keine Wiederholung;
Hintergrundgröße: Abdeckung;
Position: relativ;
}
.redPaper{
Breite: 100 %;
Höhe: 100%;
/* Rand: 1px tief schwarz; */
Überlauf: versteckt;
}
.redPaper li {
Position: absolut;
Animation: alle 3 s linear;
oben: -100px;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
.redPaper li a{
Anzeige: Block;
}
.rückwärts{
Breite: 100 %;
Hintergrund:#ccc;
Deckkraft: 0,5;
Position: absolut;
oben: 0;
}
.backward span{
Anzeige: Inline-Block;
Breite: 100px;
Höhe: 100px;
Farbe: #000;
Schriftstärke: fett;
Position: absolut;
oben: 0;
links: 0;
rechts: 0;
unten: 0;
Rand: automatisch;
Textausrichtung: zentriert;
Zeilenhöhe: 100px;
Schriftgröße: 1000 %;
}index.js-Teil:
$(Dokument).bereit(Funktion () {
var win = (parseInt($('.redPaper').css('width'))) - 60;
console.log(win)
$(".redPaper").css("Höhe", $(document).height());
$(".backward").css("Höhe", $(document).height());
$("li").css({});
// Schließen Sie die modale Ebene, wenn Sie auf „Bestätigen“ klicken.// $(".sen a").click(function(){
// $(".mo").css("Anzeige", "keine")
// });
var del = Funktion () {
Zahlen++;
// konsole.info(nums);
// konsole.log($(".li" + nums).css("links"));
$(".li" + nums).entfernen();
setTimeout(del, 200)
}
var addRedPaper = Funktion () {
var hb = parseInt(Math.random() * (3 - 1) + 1);
var randomW = parseInt(Math.random() * (70 - 30) + 20);
var randomLeft = parseInt(Math.random() * win);
var randomRotate = (parseInt(Math.random() * 45)) + 'Grad';
// console.log(rot)
Zahl++;
$(".redPaper").anhängen("<li class='li" + num + "' ><a href='javascript:;'><img src='images/hb_" + hb + ".png' data-num ='" + num + "'></a></li>");
$(".li" + num).css({
"links": zufälligesLinks,
});
$(".li" + num + " ein Bild").css({
"Breite": zufälligesW,
"transformieren": "drehen(" + randomRotate + ")",
"-webkit-transform": "drehen(" + randomRotate + ")",
"-ms-transform": "rotate(" + randomRotate + ")", /* Internet Explorer */
"-moz-transform": "drehen(" + randomRotate + ")", /* Firefox */
"-webkit-transform": "rotate(" + randomRotate + ")",/* Safari und Chrome */
"-o-transform": "drehen(" + randomRotate + ")" /* Opera */
});
$(".li" + num).animate({ 'oben': $(window).height() + 20 }, 5000, Funktion () {
//Den angezeigten roten Umschlag löschen this.remove()
});
//Wenn Sie auf den roten Umschlag klicken, wird die modale Ebene angezeigt $(".li" + num).click(function (e) {
wenn (e.target.tagName == 'IMG') {
Konsole.log(e.Ziel.Datensatz.Nummer)
}
});
setTimeout(addRedPaper, 200)
}
//Roten Umschlag vergrößern var num = 0;
setTimeout(addRedPaper, 3000);
//Countdown var rückwärts = Funktion () {
Anzahl--;
wenn (numz > 0) {
$(".backward span").html(numz);
} anders {
$(".rückwärts").entfernen();
}
setTimeout(rückwärts, 1000)
}
var numz = 4;
rückwärts();
})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:
|
<<: JS realisiert den Scroll-Effekt von Online-Ankündigungen
>>: Implementieren eines Einkaufswagens mit nativem JavaScript
Artikel empfehlen
Detaillierte Beschreibung von nginx von der Kompilierung und Installation bis zur Beschreibung der Konfigurationsdatei auf Chinesisch
Dieser Artikel stellt Nginx ausführlich vor, von ...
mysql installer web community 5.7.21.0.msi grafik-tutorial zur installation
In diesem Artikelbeispiel wird der spezifische Co...
Vollständige Schritt-für-Schritt-Anleitung zur Installation und Deinstallation von MySQL 8.0.26
Inhaltsverzeichnis Vorwort 1. Installation 1. Dow...
Vue-Element el-transfer fügt Drag-Funktion hinzu
Das Core Asset Management Project erfordert, dass...
Einführung von Symbolen durch Implementierung benutzerdefinierter Komponenten auf Basis von Vue
Vorwort Bei der Projektentwicklung gibt es viele ...
Einführung in das MySQL Connection Control Plugin
Inhaltsverzeichnis 1. Einführung in das Verbindun...
So ändern Sie den Replikationsfilter in MySQL dynamisch
MySQL Replikationsfilter dynamisch ändern Lassen ...
Einführung in /etc/my.cnf-Parameter in MySQL 5.7
Nachfolgend finden Sie einige allgemeine Paramete...
Grafisches Tutorial zur Installation und Konfiguration von MySQL 8.0.16 unter macOS
In diesem Artikel finden Sie das Installations- u...
Lösung für die falsche Ausrichtung des Eingabecursors in Chrome, Firefox und IE
Detaillierte Erklärung zur Fehlplatzierung des Ein...
Detaillierte Analyse der SQL-Ausführungsschritte
Detaillierte Analyse der SQL-Ausführungsschritte ...
So verstehen Sie SELinux unter Linux
Inhaltsverzeichnis 1. Einführung in SELinux 2. Gr...
Detaillierte Zusammenfassung der URI-Übereinstimmungsregeln der Nginx Location-Direktive
1. Einleitung Die Standortanweisung ist die Kernk...
Master-Slave-Synchronisationskonfiguration der Mysql-Datenbank
Inhaltsverzeichnis Mysql Master-Slave-Synchronisi...
Einige Erkenntnisse und Gedanken zu iframe
Diese Geschichte beginnt heute mit einer unerwarte...