九宫格抽奖

Posted 2020-10-11 AiTing on the way

从网上找了个插件，自己整理了下思路，注释了下，感觉挺好的。分享给大家，百度网盘下载看看吧。链接：http://pan.baidu.com/s/1pKO0eRx 密码：hu35

效果：

 

html代码：

<div class="demo">
            <h2>九宫格抽奖效果演示：</h2>
            <ul id="lottery">
                <li id="lottery_1"><img src="images/j_1.jpg" width="185" height="90" alt="悟空公仔" /></li>
                <li id="lottery_2"><img src="images/j_2.jpg" width="185" height="90" alt="小乖虎公仔" /></li>
                <li id="lottery_3"><img src="images/j_3.jpg" width="185" height="90" alt="神秘大礼包" /></li>
                <li id="lottery_8"><img src="images/j_4.jpg" width="185" height="90" alt="" /></li>
                <li><a href="javascript:void(0);" onclick="start_lottery();"><img src="images/j_but.jpg" width="185" height="90" alt="开始抽奖" /></a></li>
                <li id="lottery_4"><img src="images/j_5.jpg" width="185" height="90" alt="智能游戏手柄" /></li>
                <li id="lottery_7"><img src="images/j_6.jpg" width="185" height="90" alt="游戏耳机" /></li>
                <li id="lottery_6"><img src="images/j_7.jpg" width="185" height="90" alt="豆蛙抱枕" /></li>
                <li id="lottery_5"><img src="images/j_8.jpg" width="185" height="90" alt="小角鹿公仔" /></li>
            </ul>
        </div>

 

js代码：

/*******************************************/
/**      author:  adou                   **/
/**      http://www.sucaihuo.com        **/
/******************************************/

//产生随机数
function rand(Min,Max){
    var Range = Max - Min;
    var Rand = Math.random();
    return(Min + Math.round(Rand * Range));
}
//定义参数
var index = 1,              //当前选中对象的位置
    fast,                   //在哪个奖品位置开始加速
    num   = 8,              //共有多少个抽奖对象
    cycle,                  //转动多少圈
    speed = 300,            //开始时速度
    flag  = false,          //正在抽奖标志
    lucky,                  //中奖号码，实际应用由后台产生
    award,                  //奖品名称
    lottery;                //抽奖对象

//开始抽奖
function start_lottery(){
    if(flag){
        //alert(\'正在抽奖，请等待抽奖结果！\');
        //return false;
        return void(0);
    }
    flag=true;
    index = 1;              //当前选中对象的位置
    fast  = rand(3,6);      //在哪个位置开始加速
    cycle = rand(3,5);      //转动多少圈
    speed = 300;            //开始时速度
    
    
    //模拟ajax请求的数据;此数据可以前端生成，也可以后台生成。
    lucky = 8;    //中奖号码
    award = "xiaoxiong";  //奖品名称
    show_lottery();        //执行抽奖
    /*$.ajax({
        url: \'lottery.php\',
        type: "post",
        data:null,
        dataType: "json",
        timeout: 20000,
        cache: false,
        beforeSend: function(){// 提交之前
        },
        error: function(){//出错
            flag=false;
        },
        success: function(res){//成功
            if(typeof(res.award_id)!=\'undefined\'){
                lucky = res.award_id;    //中奖号码
                award = res.award_name;  //奖品名称
                show_lottery();
            }else{
                flag=false;
                alert(res.err);
            }
        }
    });*/
}
//抽奖效果展示
function show_lottery(){
    if(index>num){
        index = 1;
        cycle--;
    }
    $(\'#lottery li\').css(\'opacity\',0.3);
    $(\'#lottery_\'+index).css(\'opacity\',1);
    if(index>fast) speed=100;//开始加速（每100毫秒执行一次）
    if(cycle==0 && lucky-index<rand(2,5)) speed=speed+200;//开始减速  快到中奖位置时，自动减速
    if(cycle<=0 && index==lucky){//结束抽奖，选中号码
        clearTimeout(lottery);
        setTimeout(function(){
            $(\'#lottery li\').css(\'opacity\',1);
            alert(\'恭喜您获得：\'+award);
        },1200);
        flag = false;
    }else{
        lottery = setTimeout(show_lottery,speed);
    }
    index++;
}