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
Lösung für das Problem, dass Navicat keine Remoteverbindung zum MySql-Server herstellen kann
Die Lösung für das Problem, dass Navicat keine Re...
Detaillierte Erläuterung zum Ausführen von JMeter unter einem Linux-System und zur Optimierung des lokalen Speichers
1. Installieren Sie das systemübergreifende Datei...
CSS Sticky Footer Mehrere Implementierungen
Was ist „Sticky Footer“ Der sogenannte „Sticky Fo...
Automatisches Failover von Slave-Knoten in der Replikationsarchitektur in MySQL 8.0.23
Ich stehe seit einiger Zeit mit MGR in Kontakt. M...
vue + ts realisiert den Effekt des Ziehens von Elementen mit der Maus
In diesem Artikelbeispiel wird der spezifische Co...
Element-Beispielcode zum Implementieren dynamischer Tabellen
Inhaltsverzeichnis 【Code-Hintergrund】 【Code-Imple...
30 Minuten, um Ihnen ein umfassendes Verständnis von React Hooks zu vermitteln
Inhaltsverzeichnis Überblick 1. useState 1.1 Drei...
Detaillierte Erläuterung der Verwendung von Object.create-Instanzen in js
1. Erstellen Sie mit der Methode Object.create() ...
Jedes Mal, wenn Docker einen Container startet, werden die IP und die Hosts mit den angegebenen Operationen
Vorwort Jedes Mal, wenn Sie Docker verwenden, um ...
8 JS reduziert Verwendungsbeispiele und reduzierte Betriebsmethoden
reduce Methode ist eine Array-Iterationsmethode. ...
Detaillierte Analyse der MySQL-Indexdatenstruktur
Inhaltsverzeichnis Überblick Indexdatenstruktur B...
MySQL-Serververbindung, Trennung und cmd-Bedienung
Verwenden Sie den Befehl mysql, um eine Verbindun...
Detaillierte Schritte zur Installation und Konfiguration von MySQL 8.0 auf CentOS
Vorwort Hier sind die Schritte zur Installation u...
So verwenden Sie Docker Swarm zum Erstellen von WordPress
Ursache Ich habe WordPress einst auf Vultr einger...
Grafisches Tutorial zur Installation und Konfiguration von MySQL 5.7.24
In diesem Artikel finden Sie das Installations- u...