手机端转盘抽奖代码分享
网络编程 2021-07-04 21:03www.168986.cn编程入门
转盘,也有一种说法叫抽奖转盘,大体上是由一块圆形的面板上面有很多的奖项设置,在圆形面板的前面,还有一根指针是固定的,狼蚁网站SEO优化,长沙网络推广给大家分享手机端转盘抽奖,需要的朋友可以参考下
演示效果如下
不废话了,直接给大家贴代码了。
html部分
<div class="turntableWap 10"> <table border="0" cellspacing="0"> <tr> <td tag="0"><img src="../images/4.png" alt="4元"></td> <td tag="1" class="even"><img src="../images/6.png" alt="6元"></td> <td tag="2"><img src="../images/8.png" alt="8元"></td> <td tag="3" class="even"><img src="../images/11.png" alt="11元"></td> </tr> <tr> <td tag="13" class="even"><img src="../images/13.png" alt="13元"></td> <td colspan="2" rowspan="3" class="zpBtn"><img src="../images/zpBtn.jpg" /></td> <td tag="4"><img src="../images/40.png" alt="40元"></td> </tr> <tr> <td tag="12"><img src="../images/80.png" alt="80元"></td> <td tag="5" class="even"><img src="../images/125.png" alt="125元"></td> </tr> <tr> <td tag="11" class="even"><img src="../images/250.png" alt="250元"></td> <td tag="6"><img src="../images/400.png" alt="400元"></td> </tr> <tr> <td tag="10"><img src="../images/1000.png" alt="1000元"></td> <td tag="9" class="even"><img src="../images/iphone6.png" alt="iphone6"></td> <td tag="8"><img src="../images/Thank2.png" alt="谢谢惠顾"></td> <td tag="7" class="even"><img src="../images/500.png" alt="500元"></td> </tr> </table> </div>
css部分,由于做的这个转盘是手机端的,采用的响应式布局
.turntableWap{ padding:1rem; background:url(../images/zpTabBg.jpg) no-repeat center; background-size:100% 100%;} .turntableWap table{ width:100%;} .turntableWap table td{ vertical-align:middle; text-align:center; background-color:#ecd295;} .turntableWap table td img{ width:100%; } .turntableWap table td.even{background-color:#f6e8c5} .turntableWap table td.active{ background-color:#ed9351;}
js部分
$(".turntableWap .table").css({"height":$(".turntableWap .table").width()});//做响应式布局,外table是等宽高 var isdo = true; $(".zpBtn").on("click",function(){ var num = 13;//后台传入的奖品 var rotaNum = 14;//奖品数量 var count = -1;//高亮显示,旋转特效 var jishi = 0;//计时时间段 var speed = 50;//快速速度 var speedSlow = 200;//慢速速度 choujiang()//抽奖方法调用,在此处做判断调用choujiang(),并给num值 function choujiang(){ if(isdo){ isdo=false; $(".turntableWap").css({"background-image":"url(../images/1.gif)"}) var c = setInterval(function(){ if(count >12){ count = -1; } count = count+1; jishi = jishi+1; $(".turntableWap td").removeClass("active"); $(".turntableWap td[tag="+count+"]").addClass("active"); if(jishi>rotaNum2){ clearInterval(c); c = setInterval(function(){ count = count+1; jishi = jishi+1; $(".turntableWap td").removeClass("active"); $(".turntableWap td[tag="+count+"]").addClass("active"); if(jishi>num+rotaNum2){ clearInterval(c); $(".turntableWap").css({"background-image":"url(../images/zpTabBg.jpg)"}) isdo = true; var jp = $(".turntableWap td[tag="+count+"]").find("img").attr("alt") alert("恭喜您获取"+jp) } },speedSlow) } },speed) }else{ return; } } })
以上就是本文给大家分享的手机端转盘抽奖代码分享,希望大家喜欢。
编程语言
- 宿迁百度关键词排名指南:实现精准营销的关键
- 四川SEO优化怎么做网络推广
- 立昂技术备案老域名收购:如何为您的业务赋能
- 安徽百度关键词seo贵不贵,一般需要多少钱
- 吉林百度快照排名怎么做电话营销
- 多伦新手做SEO怎么做
- 甘肃优化关键词排名推广怎么做论坛营销
- 沙雅SEO网站推广:提升您的在线可见性
- 四川SEO优化如何提升销售额和销售量
- 聂荣网站排名优化:提升网站可见性的全方位指
- 涞水SEO:提升地方企业在线可见性的策略
- 辽宁百度seo排名怎样做网站排名
- 临湘哪有关键词排名优化:提升网站可见度的关
- 黑龙江百度网站优化有没有优惠
- 凉城优化关键词排名推广:提升您的网络可见性
- 萝北整站优化:提升您网站流量和排名的全面指