溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
本篇文章給大家分享的是有關利用JavaScript Html編寫一個移動端紅包雨功能頁面，小編覺得挺實用的，因此分享給大家學習，希望大家閱讀完這篇文章后可以有所收獲，話不多說，跟著小編一起來看看吧。
具體代碼如下
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({});
// 點擊確認的時候關閉模態層
// $(".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 () {
//刪掉已經顯示的紅包
this.remove()
});
//點擊紅包的時候彈出模態層
$(".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);
//倒數計時
var backward = function () {
numz--;
if (numz > 0) {
$(".backward span").html(numz);
} else {
$(".backward").remove();
}
setTimeout(backward, 1000)
}
var numz = 4;
backward();
})以上就是利用JavaScript Html編寫一個移動端紅包雨功能頁面，小編相信有部分知識點可能是我們日常工作會見到或用到的。希望你能通過這篇文章學到更多知識。更多詳情敬請關注億速云行業資訊頻道。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
