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: