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

实习的效果如下:
Html移动端红包雨功能页面实现_第1张图片
Html移动端红包雨功能页面实现_第2张图片
具体代码如下
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">
        
    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" + 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(); })

    你可能感兴趣的:(HTML5,JavaScript,红包雨)