素材圈送一款红色喜庆的新年抽奖模板

素材圈送一款红色喜庆的新年抽奖模板

猴年到,素材圈给大家拜年了,这款喜庆的新年抽奖模板送给素材圈的粉丝,感谢大家一直支持,我们会更加努力。

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

查看演示

演示不了,点击反馈

加入收藏

下载 380 次

打赏作者

觉得不错,可打赏下作者

下载资源

免费共享

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

引入rotate抽奖插件

<script src="js/jquery.rotate.min.js"></script>

点击开始抽奖

var $rotaryArrow = $('#rotaryArrow');
var $result = $('#result');
var $resultTxt = $('#resultTxt');
var $resultBtn = $('#result');

$rotaryArrow.click(function() {
    var data = [0, 1, 2, 3, 4, 5, 6, 7];
    data = data[Math.floor(Math.random() * data.length)];
    switch (data) {
        case 1:
            rotateFunc(1, 87, '恭喜您获得了 <em>1</em> 元代金券');
            break;
        case 2:
            rotateFunc(2, 43, '恭喜您获得了 <em>5</em> 元代金券');
            break;
        case 3:
            rotateFunc(3, 134, '恭喜您获得了 <em>10</em> 元代金券');
            break;
        case 4:
            rotateFunc(4, 177, '很遗憾,这次您未抽中奖,继续加油吧');
            break;
        case 5:
            rotateFunc(5, 223, '恭喜您获得了 <em>20</em> 元代金券');
            break;
        case 6:
            rotateFunc(6, 268, '恭喜您获得了 <em>50</em> 元代金券');
            break;
        case 7:
            rotateFunc(7, 316, '恭喜您获得了 <em>30</em> 元代金券');
            break;
        default:
            rotateFunc(0, 0, '很遗憾,这次您未抽中奖,继续加油吧');
    }
});

结束抽奖,并回调

var rotateFunc = function(awards, angle, text) {  //awards:奖项,angle:奖项对应的角度
    $rotaryArrow.stopRotate();
    $rotaryArrow.rotate({
        angle: 0,
        duration: 5000,
        animateTo: angle + 1440, //angle是图片上各奖项对应的角度,1440是让指针固定旋转4圈
        callback: function() {
            $resultTxt.html(text);
            $result.show();
        }
    });
};

声明:本资料由淘建站会员提供,如转载注明来源,资料来源淘建站免费素材库:https://www.taojz.cn/texiao/578.html
素材圈送一款红色喜庆的新年抽奖模板 希望对你有帮助,感谢您的支持!
  • JQuery 电话姓名抽奖 2.0

    JQuery 电话姓名抽奖 2.0

  • 抽奖转盘

    抽奖转盘

  • 抽奖大转盘

    抽奖大转盘

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

    原生js随机文字抽奖代码

  • jquery圆盘抽奖特效

    jquery圆盘抽奖特效

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

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

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

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

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

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

  • html5 canvas圆形转盘抽奖代码

    html5 canvas圆形转盘抽奖代码

  • PHP+jQuery+Flash完美演示翻盘抽奖

    PHP+jQuery+Flash完美演示翻盘抽奖

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

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

  • jQuery幸运水果机

    jQuery幸运水果机

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