您好,登錄后才能下訂單哦!
本篇文章給大家分享的是有關(guān)利用JavaScript Html編寫一個(gè)移動(dòng)端紅包雨功能頁(yè)面,小編覺得挺實(shí)用的,因此分享給大家學(xué)習(xí),希望大家閱讀完這篇文章后可以有所收獲,話不多說(shuō),跟著小編一起來(lái)看看吧。
具體代碼如下
html部分:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>紅包雨</title> <link rel="stylesheet" href="./css/demo.css" > <link rel="stylesheet" href="./css/index.css" > </head> <body> <!-- 紅包 --> <ul class="redPaper"> <!-- <li> <a href="#" rel="external nofollow" ><img src="./images/hb_1.png" alt=""></a> </li> --> </ul> <div class="backward"> <span></span> </div> <script src="./js/jquery.min.js"></script> <script src="./js/index.js"></script> <script> </script> </body> </html>
demo.css為初始化css,可以不加
index.css部分
body{ width: 100%; height: 100%; background-image: url(../images/bj.jpg); background-repeat: no-repeat; background-size: cover; position: relative; } .redPaper{ width: 100%; height: 100%; /* border: 1px solid black; */ overflow: hidden; } .redPaper li { position: absolute; animation: all 3s linear; top:-100px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } .redPaper li a{ display: block; } .backward{ width: 100%; background:#ccc; opacity: 0.5; position: absolute; top: 0; } .backward span{ display: inline-block; width: 100px; height: 100px; color: #000; font-weight: bold; position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; text-align: center; line-height: 100px; font-size: 1000%; }
index.js部分:
$(document).ready(function () { var win = (parseInt($('.redPaper').css('width'))) - 60; console.log(win) $(".redPaper").css("height", $(document).height()); $(".backward").css("height", $(document).height()); $("li").css({}); // 點(diǎn)擊確認(rèn)的時(shí)候關(guān)閉模態(tài)層 // $(".sen a").click(function(){ // $(".mo").css("display", "none") // }); var del = function () { nums++; // console.info(nums); // console.log($(".li" + nums).css("left")); $(".li" + nums).remove(); setTimeout(del, 200) } var addRedPaper = function () { 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)) + 'deg'; // console.log(rot) num++; $(".redPaper").append("<li class='li" + num + "' ><a href='javascript:;'><img src='images/hb_" + hb + ".png' data-num ='" + num + "'></a></li>"); $(".li" + num).css({ "left": randomLeft, }); $(".li" + num + " a img").css({ "width": randomW, "transform": "rotate(" + randomRotate + ")", "-webkit-transform": "rotate(" + randomRotate + ")", "-ms-transform": "rotate(" + randomRotate + ")", /* Internet Explorer */ "-moz-transform": "rotate(" + randomRotate + ")", /* Firefox */ "-webkit-transform": "rotate(" + randomRotate + ")",/* Safari 和 Chrome */ "-o-transform": "rotate(" + randomRotate + ")" /* Opera */ }); $(".li" + num).animate({ 'top': $(window).height() + 20 }, 5000, function () { //刪掉已經(jīng)顯示的紅包 this.remove() }); //點(diǎn)擊紅包的時(shí)候彈出模態(tài)層 $(".li" + num).click(function (e) { if (e.target.tagName == 'IMG') { console.log(e.target.dataset.num) } }); setTimeout(addRedPaper, 200) } //增加紅包 var num = 0; setTimeout(addRedPaper, 3000); //倒數(shù)計(jì)時(shí) var backward = function () { numz--; if (numz > 0) { $(".backward span").html(numz); } else { $(".backward").remove(); } setTimeout(backward, 1000) } var numz = 4; backward(); })
以上就是利用JavaScript Html編寫一個(gè)移動(dòng)端紅包雨功能頁(yè)面,小編相信有部分知識(shí)點(diǎn)可能是我們?nèi)粘9ぷ鲿?huì)見到或用到的。希望你能通過(guò)這篇文章學(xué)到更多知識(shí)。更多詳情敬請(qǐng)關(guān)注億速云行業(yè)資訊頻道。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。