jquery实现九宫格大转盘抽奖源码

一、用到的图片

二、代码如下，重点是js部分

   
       
           
           
           
       
       
           
           
           
       
       
           
           
           
       
   

三、注意事项

.mask开始如下，用的是rgba，但是IE8不兼容，改为使用png图片background:url(images/mask.png) no-repeat;


.mask {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    background-color: rgba(252,211,4,0.5);
    display: none
}

jQuery+Ajax九宫格抽奖转盘

分享一款jQuery九宫格大转盘抽奖代码网页特效，点击抽奖按钮开始随机抽奖选择奖品，可设置起点位置、奖品数量、转动次数、中奖位置参数，并且后台ajax.php可设置奖品和中奖概率。

首先我们在#lottery放置12个奖品，代码如下：

点击“开始抽奖”按钮，并且远程ajax.php获取奖项：

$(function() {
    lottery.init('lottery');
    $("#lottery a").click(function() {
        if (click) {
            return false;
        } else {
            lottery.speed = 100;
            $.post("ajax.php", {
                uid: 1
            },
            function(data) { //获取奖品，也可以在这里判断是否登陆状态
                $("#lottery").attr("prize_site", data.prize_site);
                $("#lottery").attr("prize_id", data.prize_id);
                $("#lottery").attr("prize_name", data.prize_name);
                roll();
                click = true;
                return false;
            },
            "json")
        }
    });
})

Ajax.php

12个奖品数组如下，其中prize表示奖项内容，v表示中奖几率(若数组中七个奖项的v的总和为100，如果v的值为1，则代表中奖几率为1%，依此类推)

$prize_arr = array(
    '0' => array('id' => 1, 'prize' => '一等奖', 'v' => 5),
    '1' => array('id' => 2, 'prize' => '二等奖', 'v' => 5),
    '2' => array('id' => 3, 'prize' => '三等奖', 'v' => 5),
    '3' => array('id' => 4, 'prize' => '四等奖', 'v' => 5),
    '4' => array('id' => 5, 'prize' => '五等奖', 'v' => 5),
    '5' => array('id' => 6, 'prize' => '六等奖', 'v' => 5),
    '6' => array('id' => 7, 'prize' => '七等奖', 'v' => 5),
    '7' => array('id' => 8, 'prize' => '八等奖', 'v' => 5),
    '8' => array('id' => 9, 'prize' => '九等奖', 'v' => 5),
    '9' => array('id' => 10, 'prize' => '十等奖', 'v' => 5),
    '10' => array('id' => 11, 'prize' => '十一等奖', 'v' => 25),
    '11' => array('id' => 12, 'prize' => '十二等奖', 'v' => 25),
);

获取随机奖品：

foreach ($prize_arr as $k=>$v) {
    $arr[$v['id']] = $v['v'];
 
}
 
$prize_id = getRand($arr); //根据概率获取奖项id  
foreach($prize_arr as $k=>$v){ //获取前端奖项位置
    if($v['id'] == $prize_id){
     $prize_site = $k;
     break;
    }
}
$res = $prize_arr[$prize_id - 1]; //中奖项  
 
$data['prize_name'] = $res['prize'];
$data['prize_site'] = $prize_site;//前端奖项从-1开始
echo json_encode($data);