js抽奖中红包专题

js抽奖中红包专题

点击中间的转盘开始,就会立即抽奖,最好弹出一个中奖红包弹出层,金额是随机,这个数据最好在后台控制,前台用来展示。

淘建站为您提供更多_抽奖_转盘_抽奖_转盘,在此特别感谢您对我们的支持与厚爱!

查看演示

演示不了,点击反馈

加入收藏

下载 125 次

下载资源

12 积分

特别说明:本站资源来自网友发布分享,仅供学习与参考,请勿用于商业用途,若有侵权请联系删除(272966172@qq.com)。
分类:抽奖 > 转盘 难易程度:中级

抽奖html代码

<div class="turntable-bg">
    <div class="pointer"><img src="images/pointer.png" alt="pointer"/></div>
    <div class="rotate" ><img id="rotate" src="images/turntable.png" alt="turntable"></div>
</div>

抽奖奖项设置和转盘转动角度

var rotateTimeOut = function() {
    $('#rotate').rotate({
        angle: 0,
        animateTo: 2160,
        duration: 8000,
        callback: function() {
            alert('网络超时,请检查您的网络设置!');
        }
    });
};
var bRotate = false;

var rotateFn = function(awards, angles, txt) {
    bRotate = !bRotate;
    $('#rotate').stopRotate();
    $('#rotate').rotate({
        angle: 0,
        animateTo: angles + 1800,
        duration: 8000,
        callback: function() {
            /*alert(txt);*/
            swal({title: "获得" + txt + "红包", imageUrl: "images/gx.png"});

            bRotate = !bRotate;
        }
    })
};

document.onkeydown = function(event) {
    var e = event || window.event || arguments.callee.caller.arguments[0];

    if (e && e.keyCode == 32) { // enter 键
        $('showSweetAlert').css("display", "none");
        $('sweet-overlay').css("display", "none");

        if (bRotate)
            return;
        var item = rnd(1, 5);

        switch (item) {
            case 1:
                //var angle = [26, 88, 137, 185, 235, 287, 337];
                rotateFn(1, 55, '888元');
                break;
            case 2:
                //var angle = [88, 137, 185, 235, 287];
                rotateFn(2, 140, '388元');
                break;
            case 3:
                //var angle = [137, 185, 235, 287];
                rotateFn(3, 199, '188元');
                break;
            case 4:
                //var angle = [137, 185, 235, 287];
                rotateFn(4, 269, '88元');
                break;
            case 5:
                //var angle = [185, 235, 287];
                rotateFn(5, 341, '8元');
                break;

        }

        console.log(item);

    }
};

$('.pointer').click(function() {

    if (bRotate)
        return;
    var item = rnd(1, 5);

    switch (item) {
        case 1:
            //var angle = [26, 88, 137, 185, 235, 287, 337];
            rotateFn(1, 55, '888元');
            break;
        case 2:
            //var angle = [88, 137, 185, 235, 287];
            rotateFn(2, 140, '388元');
            break;
        case 3:
            //var angle = [137, 185, 235, 287];
            rotateFn(3, 199, '188元');
            break;
        case 4:
            //var angle = [137, 185, 235, 287];
            rotateFn(4, 269, '88元');
            break;
        case 5:
            //var angle = [185, 235, 287];
            rotateFn(5, 341, '8元');
            break;

    }
});

声明:本资料由淘建站会员提供,如转载注明来源,资料来源淘建站免费素材库:https://www.taojz.cn/texiao/889.html
js抽奖中红包专题 希望对你有帮助,感谢您的支持!
  • JQuery 电话姓名抽奖 2.0

    JQuery 电话姓名抽奖 2.0

  • 点击开始下红包雨

    点击开始下红包雨

  • 抽奖转盘

    抽奖转盘

  • 抽奖大转盘

    抽奖大转盘

  • 原生js随机文字抽奖代码

    原生js随机文字抽奖代码

  • jquery圆盘抽奖特效

    jquery圆盘抽奖特效

  • jquery css3点击红包摇一摇抽奖代码

    jquery css3点击红包摇一摇抽奖代码

  • jQuery抢红包点击弹出抢红包提示代码

    jQuery抢红包点击弹出抢红包提示代码

  • jquery兄弟连学员点名系统_类似抽奖的学员点名工具

    jquery兄弟连学员点名系统_类似抽奖的学员点名工具

  • jquery鼠标点击抽奖按钮奖品格子闪烁摇奖随机抽奖

    jquery鼠标点击抽奖按钮奖品格子闪烁摇奖随机抽奖

  • html5 canvas圆形转盘抽奖代码

    html5 canvas圆形转盘抽奖代码

  • jQuery+Flash两种不同的砸金蛋源码

    jQuery+Flash两种不同的砸金蛋源码

  • 留言(0)
    头像
     阿里云限量代金券,戳我领取
    1 2