效果(网络问题上传不了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
恭喜你抽到现金红包
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);}