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

最新推荐文章于 2024-06-13 14:30:20 发布

UzumakiHan

最新推荐文章于 2024-06-13 14:30:20 发布

阅读量2.4k

点赞数 3

分类专栏： JavaScript html 文章标签： html5 javascript 红包雨

本文链接：https://blog.csdn.net/Hhjian524/article/details/106551597

版权

JavaScript 同时被 2 个专栏收录

93 篇文章 1 订阅

订阅专栏

html

45 篇文章 0 订阅

订阅专栏

实习的效果如下：
在这里插入图片描述

具体代码如下
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();

})

UzumakiHan

关注

3
点赞
踩
11

收藏

觉得还不错? 一键收藏
1
评论
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
复制链接

扫一扫

专栏目录