最新赞助活动温馨提示:自愿赞助服务器费用,学生和没有工作的整站资源免费下载!
头像

jQuery指针不动转盘动的Rotate转盘插件

来源:http://www.erdangjiade.com/ 沐浴春风 2015-11-23 04:44浏览(1819)

二当家的提供了很多抽奖演示与下载:http://www.erdangjiade.com/search.html?keyword=%25E6%258A%25BD%25E5%25A5%2596。大部分抽奖的动画效果是由rotate这块抽奖插件完成的,相关rotate抽奖教程,请看jQuery幸运大转盘_jQuery+PHP抽奖程序(上) http://www.erdangjiade.com/js/19.html和教程下集http://www.erdangjiade.com/js/20.html

0、请不要问“在不在”之类的问题,有问题直接问!1、学生或暂时没有工作的童鞋,整站资源免费下载!2、¥9.9充值终身VIP会员,加我微信,826096331 拉你进VIP群学习!3、程序员加油,技术改变世界。在线 充值

jQuery指针不动转盘动的Rotate转盘插件
分类:其它特效 > 抽奖 难易:中级
查看演示

加我微信,拉你进VIP群学习:

下载资源 下载积分: 30 积分

抽奖页面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>

随机抽奖

function rnd(n, m) {
    return Math.floor(Math.random() * (m - n + 1) + n)
}

奖品和角度

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

    if (bRotate)
        return;
    var item = rnd(0, 7);

    switch (item) {
        case 0:
            //var angle = [26, 88, 137, 185, 235, 287, 337];
            rotateFn(0, 337, '未中奖');
            break;
        case 1:
            //var angle = [88, 137, 185, 235, 287];
            rotateFn(1, 26, '免单4999元');
            break;
        case 2:
            //var angle = [137, 185, 235, 287];
            rotateFn(2, 88, '免单50元');
            break;
        case 3:
            //var angle = [137, 185, 235, 287];
            rotateFn(3, 137, '免单10元');
            break;
        case 4:
            //var angle = [185, 235, 287];
            rotateFn(4, 185, '免单5元');
            break;
        case 5:
            //var angle = [185, 235, 287];
            rotateFn(5, 185, '免单5元');
            break;
        case 6:
            //var angle = [235, 287];
            rotateFn(6, 235, '免分期服务费');
            break;
        case 7:
            //var angle = [287];
            rotateFn(7, 287, '提高白条额度');
            break;
    }

    console.log(item);
});

开始和停止抽奖

var rotateFn = function(awards, angles, txt) {
    bRotate = !bRotate;
    $('#rotate').stopRotate();
    $('#rotate').rotate({
        angle: 0,
        animateTo: angles + 1800,
        duration: 8000,
        callback: function() {
            alert(txt);
            bRotate = !bRotate;
        }
    })
};
标签: 抽奖rotate
声明:本文为原创文章,如需转载,请注明来源erdangjiade.com并保留原文链接:https://www.erdangjiade.com/js/572.html
评论0
头像

友情提示:垃圾评论一律封号 加我微信:826096331拉你进VIP群学习群

1 2