H5大转盘，结束后反馈结果

来源：互联网发布：崩坏三矩阵buff 编辑：程序博客网时间：2024/04/28 09:34

自己写了一个大转盘效果，方便以后用到时直接修改使用

使用的图片资源：

roate.png

roate_btn.png

原理其实是一开始就已经设置好最终中奖结果，根据这个结果实现旋转的，旋转结束后可做相应操作，代码如下：

<!doctype html><html><head><meta charset="utf-8"><title>大转盘测试</title><style>.outBox{ width:300px; height:300px; position:fixed; left:50%; top:50%; -webkit-transform:translate(-50%,-50%); transform:translate(-50%,-50%);}.roateBox{ width:300px; height:300px; background:url(roate.png) no-repeat center center; background-size:100%; position:absolute; left:0; top:0;}.roateBox.toroate{-webkit-animation:setroate 5s .1s ease-in-out both;animation:setroate 5s .1s ease-in-out both;}.roateBtn{ width:72.6px; height:112.6px; background:url(roate_btn.png) no-repeat center center; background-size:100% 100%; position:absolute; left:50%; margin-left:-36.3px; top:73px; cursor:pointer;}</style><style id="set_roate"></style></head><body><div class="outBox">    <div class="roateBox"></div>    <div class="roateBtn"></div></div><script type="text/javascript" src="http://code.jquery.com/jquery-2.0.0.min.js"></script><script type="text/javascript">//一共多少等份var equalParts = 8;//注：根据转盘图片对应的值（转盘图片指针处顺时针向右数，奖品对应的格子数【第几等份上】）var awardSetting = [[1,3,5,7],//“谢谢参与”对应的格子2,//“二等奖”对应的格子4,//“三等奖”对应的格子6,//“四等奖”对应的格子8//“一等奖”对应的格子];//每一等份多少度var oneAngle = 360 / equalParts;//根据 设置的 指针停止时指向的格子（中奖结果），设置其旋转角度区间function setRoate(awardSettingNumber){//awardSettingNumber  取值范围 awardSetting的key值（0至4）//angleNumber  转盘停止时 指针 指向的格子angleNumber = awardSetting[awardSettingNumber];//未中奖对应的几个格子，随机取一个if(typeof(angleNumber) == 'object'){angleNumber = angleNumber[Math.floor(0 + Math.random() * (angleNumber.length - 0))];}//转盘停止时 指针 指向的格子 最小角度minAngle = 360 - angleNumber * oneAngle + 5;//转盘停止时 指针 指向的格子 最大角度maxAngle = 360 - (angleNumber - 1) * oneAngle - 5;//旋转区间newAngle = Math.floor(minAngle + Math.random() * (maxAngle - minAngle)) + 360 * 15;var newstyle = '';newstyle += '@-webkit-keyframes setroate{';newstyle += '0%{ -webkit-transform:rotate(0deg);}';newstyle += '100%{ -webkit-transform:rotate(' + newAngle + 'deg);}';newstyle += '}';newstyle += '@keyframes setroate{';newstyle += '0%{ transform:rotate(0deg);}';newstyle += '100%{ transform:rotate(' + newAngle + 'deg);}';newstyle += '}';$('#set_roate').html(newstyle);$('.roateBox').addClass('toroate');setTimeout(function(){roateEnd(awardSettingNumber);}, 5150);}//旋转结束执行function roateEnd(awardSettingNumber){roateList = ['谢谢参与','二等奖','三等奖','四等奖','一等奖'];alert(roateList[awardSettingNumber]);$('.roateBox').removeClass('toroate');ifRoate = false;}var ifRoate = false;//点击转动转盘$('.roateBtn').on('click',function(){if(ifRoate){return;}else{ifRoate = true;}setRoate(1);//传入0至4的参数});</script></body></html>

0 0