红包效果实现

其他 2020-01-19 11:32:18 阅读次数: 0

效果(网络问题上传不了gif动态图片)

CSS


.zh-chb-main{position: relative;margin: 0.3rem 0.3rem 0;}
.zh-chb-main .zh-center{position: absolute;z-index: 2;left: 50%; top: 1.2rem;width: 3.6rem;height: 2.4rem;margin-left: -1.8rem;font-size: 0.3rem;color: #fff;text-align: center;}
.zh-chb-main .zh-center p{padding: 0.7rem 0 0.3rem;}
.zh-chb-main .zh-center ul{display: inline-block;}
.zh-chb-main .zh-center ul li{float: left;width: 0.8rem;height: 0.8rem;margin-left: -1px;border: 1px solid #FCCE01;font-size: 0.5rem;color: #FCCE01;text-align: center;line-height: 0.8rem;}
.zh-chb-main .zh-awards-list{position: relative;width: 6.75rem;height: 5.4rem;margin: 0 auto;}
.zh-chb-main .zh-awards-list li{position: absolute;width: 1.35rem;height: 1.35rem;background-color: #F7C29F;box-shadow: 0 0 0 1px #fff;}
.zh-chb-main .zh-awards-list .active:before{content: "";display: block;position: absolute;z-index: 2;left: 0;top: 0;width: 100%;height: 100%;border: 2px solid #f00;box-sizing: border-box;}
.zh-chb-main .zh-awards-list .zh-hb{width: 1.15rem;height: 1.15rem;margin: 0.1rem 0 0 0.1rem;border-radius: 10px;background-color: #CE1012;}
.zh-chb-main .zh-awards-list li:nth-of-type(1){left: 0;top: 0;}
.zh-chb-main .zh-awards-list li:nth-of-type(2){left: 1.35rem;top: 0;}
.zh-chb-main .zh-awards-list li:nth-of-type(3){left: 2.7rem;top: 0;}
.zh-chb-main .zh-awards-list li:nth-of-type(4){left: 4.05rem;top: 0;}
.zh-chb-main .zh-awards-list li:nth-of-type(5){left: 5.4rem;top: 0;}
.zh-chb-main .zh-awards-list li:nth-of-type(6){left: 5.4rem;top: 1.35rem;}
.zh-chb-main .zh-awards-list li:nth-of-type(7){left: 5.4rem;top: 2.7rem;}
.zh-chb-main .zh-awards-list li:nth-of-type(8){left: 5.4rem;top: 4.05rem;}
.zh-chb-main .zh-awards-list li:nth-of-type(9){left: 4.05rem;top: 4.05rem;}
.zh-chb-main .zh-awards-list li:nth-of-type(10){left: 2.7rem;top: 4.05rem;}
.zh-chb-main .zh-awards-list li:nth-of-type(11){left: 1.35rem;top: 4.05rem;}
.zh-chb-main .zh-awards-list li:nth-of-type(12){left: 0rem;top: 4.05rem;}
.zh-chb-main .zh-awards-list li:nth-of-type(13){left: 0rem;top: 2.7rem;}
.zh-chb-main .zh-awards-list li:nth-of-type(14){left: 0rem;top: 1.35rem;}
.zh-chb-main .zh-awards-list .zh-award-1a{background-image: url(../images/chb/img-chb-1a.png);background-size: 100% auto;background-repeat: no-repeat;background-position: center;}
.zh-chb-main .zh-awards-list .zh-award-1b{background-image: url(../images/chb/img-chb-1b.png);background-size: 100% auto;background-repeat: no-repeat;background-position: center;}
.zh-chb-main .zh-awards-list .zh-award-2a{background-image: url(../images/chb/img-chb-2a.png);background-size: 100% auto;background-repeat: no-repeat;background-position: center;}
.zh-chb-main .zh-awards-list .zh-award-2b{background-image: url(../images/chb/img-chb-2b.png);background-size: 100% auto;background-repeat: no-repeat;background-position: center;}
.zh-chb-main .zh-awards-list .zh-award-3a{background-image: url(../images/chb/img-chb-3a.png);background-size: 100% auto;background-repeat: no-repeat;background-position: center;}
.zh-chb-main .zh-awards-list .zh-award-3b{background-image: url(../images/chb/img-chb-3b.png);background-size: 100% auto;background-repeat: no-repeat;background-position: center;}
.zh-chb-main .zh-awards-list .zh-award-4a{background-image: url(../images/chb/img-chb-4a.png);background-size: 100% auto;background-repeat: no-repeat;background-position: center;}
.zh-chb-main .zh-awards-list .zh-award-4b{background-image: url(../images/chb/img-chb-4b.png);background-size: 100% auto;background-repeat: no-repeat;background-position: center;}
.zh-chb-main .zh-awards-list .zh-award-5{background-image: url(../images/chb/img-chb-5.png);background-size: 100% auto;background-repeat: no-repeat;background-position: center;}
.zh-chb-main .zh-awards-list2{height: 1.75rem;margin-top: 0.5rem;}
.zh-chb-main .zh-awards-list2 li {padding-bottom: 0.4rem;font-size: 0.3rem;color: #fff;text-align: center;}
.zh-chb-main .zh-awards-list2 li .zh-hb{margin-bottom: 0.05rem;color: #d5190d;}
.zh-chb-main .zh-awards-list2 li:nth-of-type(2){left: 1.8rem;}
.zh-chb-main .zh-awards-list2 li:nth-of-type(3){left: 3.6rem;}
.zh-chb-main .zh-awards-list2 li:nth-of-type(4){left: 5.4rem;}
.zh-chb-main .zh-go{display: block;width: 2rem;padding: 0.1rem 0;margin: 0.5rem auto;border-radius: 5px;background-color: #FCCE01;font-size: 0.5rem;color: #fff;text-align: center;}

HTML

<div class="zh-chb-main">
    <div class="zh-center">
        <p>获得奖金</p>
        <ul>
            <li>0</li>
            <li>0</li>
        </ul>
    </div>
    <ul class="zh-awards-list" id="zh_awards_list">
        <li data-award="1a"><div class="zh-hb zh-award-1a"></div></li>
        <li data-award="2a"><div class="zh-hb zh-award-2a"></div></li>
        <li data-award="3a"><div class="zh-hb zh-award-3a"></div></li>
        <li data-award="5"><div class="zh-hb zh-award-5"></div></li>
        <li data-award="3b"><div class="zh-hb zh-award-3b"></div></li>
        <li data-award="2a"><div class="zh-hb zh-award-2a"></div></li>
        <li data-award="2b"><div class="zh-hb zh-award-2b"></div></li>
        <li data-award="1a"><div class="zh-hb zh-award-1a"></div></li>
        <li data-award="4a"><div class="zh-hb zh-award-4a"></div></li>
        <li data-award="1b"><div class="zh-hb zh-award-1b"></div></li>
        <li data-award="3a"><div class="zh-hb zh-award-3a"></div></li>
        <li data-award="4a"><div class="zh-hb zh-award-4a"></div></li>
        <li data-award="4b"><div class="zh-hb zh-award-4b"></div></li>
        <li data-award="5"><div class="zh-hb zh-award-5"></div></li>
    </ul>
    <ul class="zh-awards-list zh-awards-list2">
        <li><div class="zh-hb zh-award-1a"></div>5元</li>
        <li><div class="zh-hb zh-award-2a"></div>10元</li>
        <li><div class="zh-hb zh-award-3a"></div>15元</li>
        <li><div class="zh-hb zh-award-4a"></div>20元</li>
    </ul>
    <a class="zh-go" href="###">GO</a>
</div>

<!-- 提示 -->
<div class="zh-dialog" id="zh_chb">
    <div class="zh-chb-tips">
        <img class="zh-close" src="images/icon-close2.png" alt="">
        <img class="zh-img-base" src="images/img-tips-redpacket.png" alt="">
        <div class="zh-text">
            恭喜你抽到现金红包
            <strong></strong>
        </div>
    </div>
</div>
专门建立的学习Q-q-u-n： 731771211，分享学习方法和需要注意的小细节，不停更新最新的教程和学习技巧
（从零基础开始到前端项目实战教程，学习工具，全栈开发学习路线以及规划）

JS

// 关闭对话框
$('.zh-dialog .zh-close').click(function() {
    $('.zh-dialog').removeClass('active');
});

// 抽奖
$('.zh-go').click(function() {
    if(!$(this).hasClass('active')) {
        $(this).addClass('active');
        cjFn(this);
    }
});

// 元函数
function yuanFn(type) {
    switch(type) {
        case '1a':
            return '05';
            break;
        case '1b':
            return '10';
            break;
        case '2a':
            return '10';
            break;
        case '2b':
            return '20';
            break;
        case '3a':
            return '15';
            break;
        case '3b':
            return '30';
            break;
        case '4a':
            return '20';
            break;
        case '4b':
            return '40';
            break;
        case '5':
            return '00';
            break;
    }
}

// 抽奖函数
var prevIndex = 0;
function cjFn(goEle) {
    $('#zh_awards_list li').removeClass('open');
    // 循环
    var liNum = $('#zh_awards_list li').size(), // 红包数量
        index = prevIndex, // 默认索引
        acount = liNum*Math.round(Math.random()*2+1)+Math.round(Math.random()*liNum), // 总次数
        allTimes = Math.floor(acount/liNum), // 总圈数
        restTimes = acount%liNum; // 剩余次数
    var cjFlag = setInterval(function() {
        index++;
        if(allTimes > 0) {
            if(index==liNum) {
                index = 0;
                allTimes--;
            }
        } else {
            if(restTimes==0 || index==restTimes) {
                var activeEle = $('#zh_awards_list li').eq(index-1),
                    money = yuanFn(activeEle.attr('data-award'));
                $('.zh-chb-main .zh-center ul li:first').text(money.substr(0,1));
                $('.zh-chb-main .zh-center ul li:last').text(money.substr(1,1));
                $('.zh-chb-tips .zh-text strong').text((+money)+'元');
                $('#zh_chb').addClass('active');
                activeEle.addClass('open');
                $(goEle).removeClass('active');
                clearInterval(cjFlag);
            }
        }
        $('#zh_awards_list li').eq(index-1).addClass('active').siblings().removeClass('active');
        prevIndex = index;
    }, 50);
}
编程世界-云
发布了275 篇原创文章 · 获赞 9 · 访问量 1万+
私信 关注

猜你喜欢

转载自blog.csdn.net/weixin_45761317/article/details/104032299
今日推荐
火速冲上 GitHub 热榜 —— 开源编程语言、框架哪有这么可爱？
北京人形机器人创新中心发布全球首个纯电驱拟人奔跑的全尺寸人形机器人“天工”
LFOSSA 源来如此公开课 | 掌握云原生未来：CNCF 认证全面攻略与备考秘籍
国产云输入法——仅华为无云端数据上传安全问题
开源日报 | 工业开源项目OGG 1.0；姐姐，你要和我一起配置火狐吗；苹果AI遥遥落后？Fedora 40
开放签电子签章：停止新增，优化体验，前进更进（五一假期前工作）
周排行
Metasploit文件目录与入侵基本概念
跨域(CORS)请求问题[No 'Access-Control-Allow-Origin' header is present on the requested resource]常见解决方案
CodeIgniter 源码解读之 CodeIgniter.php（二）
SAS入门之（四）改变数据类型
初识元组
[数学建模]数学建模算法和模型（B站视频）（二）
Nginx 服务器源码安装配置流程
C#实现语音视频录制 【基于MCapture + MFile】
开发进度4
下载安装vue的方法网址
每日归档
更多
2024-04-28(0)
2024-04-27(56)
2024-04-26(39)
2024-04-25(22)
2024-04-24(36)
2024-04-23(26)
2024-04-22(39)
2024-04-21(0)
2024-04-20(6)
2024-04-19(5)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022