jQuery+Css3微信手机端大转盘抽奖特效插件transform属性旋转4279
转盘HTML结构 
<ul id="wheel" class="wheel-list">
    <li style="transform: rotate(0deg);">
        <i style="transform: rotate(30deg) skewY(30deg);">
        </i>
        <div class="prize">
            <h3>
                一等奖
            </h3>
            <p>
                iPhone6 plus
            </p>
        </div>
    </li>
    <li style="transform: rotate(60deg);">
        <i style="transform: rotate(30deg) skewY(30deg);">
        </i>
        <div class="prize">
            <h3>
                再接再厉
            </h3>
            <p>
                呜呜 没有中奖 ...
            </p>
        </div>
    </li>
    <li style="transform: rotate(120deg);">
        <i style="transform: rotate(30deg) skewY(30deg);">
        </i>
        <div class="prize">
            <h3>
                鼓励奖
            </h3>
            <p>
                差一点啊
            </p>
        </div>
    </li>
    <li style="transform: rotate(180deg);">
        <i style="transform: rotate(30deg) skewY(30deg);">
        </i>
        <div class="prize">
            <h3>
                四等奖
            </h3>
            <p>
                特级红富士一个
            </p>
        </div>
    </li>
    <li style="transform: rotate(240deg);">
        <i style="transform: rotate(30deg) skewY(30deg);">
        </i>
        <div class="prize">
            <h3>
                三等奖
            </h3>
            <p>
                iPad mini retina
            </p>
        </div>
    </li>
    <li style="transform: rotate(300deg);">
        <i style="transform: rotate(30deg) skewY(30deg);">
        </i>
        <div class="prize">
            <h3>
                二等奖
            </h3>
            <p>
                iPad Air2
            </p>
        </div>
    </li>
</ul>
Js
//开始 function  ran = 随机 
function operation(ran) {
    lenCloc++;
    var Prize = turntable[ran] - 1,
    sun = turn * 360; //编号  // 度数  //  时间
    if (Prize >= totalNum) {
        Prize = 0;
    }
    var soBuom = parseInt(Math.floor(Math.random() * 60) - 30);
        //避免多次出现1等奖 所以要删除 下标 
    turntable.splice(ran, 1);
    //旋转度数 = 上次度数+ 最小圈数 * 360 + 当前数字 * 60 +随机角度  = 最终旋转度数
    wheel.style.transform = "rotate(" + ((lenCloc * sun + Prize * 60) + soBuom) + "deg)";
    //wheel.style.webkitTransform = "rotate("+((lenCloc*sun+Prize*60)+soBuom)+"deg)";
    setTimeout(function() {
        alert("您获得了奖品编号:" + PrizeSon[Prize]);
        isStatr = false;
    },
    3200);
}
参数
var totalNum = 6 ; // 转盘 总数
var trunNum = [ 1 , 2 , 3 , 4 , 5 , 6 ]; //概率奖品 编号
var turntable = [] ; // 随机概率计算
var isStatr = false ; //锁 专拍没有执行完的时候 不可以再次点击 ;
var lenCloc = 0 ; //当前第几次计算叠加的度数
var turn  = 3 ; //转盘旋转最低的圈数
      立即下载 ( 文件大小:0.00 M)

    浏览器兼容性

    1. IE 9
    2. Mozilla Firefox
    3. Google Chrome
    4. Oper
    5. Safari

    技术讨论区

    1. 请先登录

        发 布

    键盘快捷键: 上一个 下一个