本文实例为大家分享了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();
})
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
© 版权声明
THE END
暂无评论内容