红包html页面,JavaScript Html实现移动端红包雨功能页面

本文实例为大家分享了Html实现移动端红包雨功能页面的具体代码，供大家参考，具体内容如下

实现效果如下：

具体代码如下

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" + 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();

})

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。