JavaScript Html實現移動端紅包雨功能頁面
阿新 • • 發佈：2021-01-12
本文例項為大家分享了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="JavaScript Html實現移動端紅包雨功能頁面"></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);
}
.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();
})以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支援我們。