本文实例为大家分享了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("
![hb_%22%20+%20hb%20+%20%22.png](images/hb_%22%20+%20hb%20+%20%22.png)
$(".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();
})
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。