Posted in Javascript onJanuary 10, 2021
本文实例为大家分享了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="#" ><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实现移动端红包雨功能页面
- Author -
Jeslie-He声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。
Reply on: @reply_date@
@reply_contents@