素材牛VIP会员

PHP+jQuery+Ajax实现九宫格抽奖大转盘效果

 所属分类:PHP实例-Ajax

 浏览:4589次  评论:10次  更新时间:2016-07-28
牛币素材VIP可免积分下载
PHP+jQuery+Ajax实现九宫格抽奖大转盘效果兼容IE6
积分说明:注册即送10牛币,每日签到可获得5牛币,成为VIP会员可永久免牛币下载!   充值积分   充值会员   更多说明»
素材描述:发一个抽奖的效果。可设置起点位置、奖品数量、转动次数、中奖位置参数,并且后台ajax.php可设置奖品和中奖概率

详细介绍

使用方法:

载入CSS样式

<link rel="stylesheet" type="text/css" href="style.css" />

载入jQuery库文件

<script type="text/javascript" src="http://ajax.useso.com/ajax/libs/jquery/1.7.2/jquery.min.js">script>

效果初始化、配置

var lottery = { 
        index: 0, //当前转动到哪个位置,起点位置 
        count: 0, //总共有多少个位置 
        timer: 0, //setTimeout的ID,用clearTimeout清除 
        speed: 20, //初始转动速度 
        times: 0, //转动次数 
        cycle: 50, //转动基本次数:即至少需要转动多少次再进入抽奖环节 
        prize: 0, //中奖位置 
        init: function(id) { 
            if ($("#" + id).find(".lottery-unit").length > 0) { 
                $lottery = $("#" + id); 
                $units = $lottery.find(".lottery-unit"); 
                this.obj = $lottery; 
                this.count = $units.length; 
                $lottery.find(".lottery-unit-" + this.index).addClass("active"); 
            } 
        }, 
        roll: function() { 
            var index = this.index; 
            var count = this.count; 
            var lottery = this.obj; 
            $(lottery).find(".lottery-unit-" + index).removeClass("active"); 
            index += 1; 
            if (index > count - 1) { 
                index = 0; 
            } 
            $(lottery).find(".lottery-unit-" + index).addClass("active"); 
            this.index = index; 
            return false; 
        }, 
        stop: function(index) { 
            this.prize = index; 
            return false; 
        } 
};

点击抽奖并且远程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: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), 
);

PHP后端获取随机奖品

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);

相关素材 - Ajax

讨论这个素材(10)回答他人问题或分享使用心得会奖励牛币

华***n  
2017年10月18日

学习了 感谢作者分享

回复
ok***07  
2017年10月19日

奖品数量可以减少和增加吗

回复
ke***ch  
2018年11月09日

学习了,谢谢分享!!!!!!!!!!!!!!!!!!!!!!!!!

回复
qq***91  
2019年09月21日

学习了,谢谢分享!

回复
qq***51  
2020年04月21日

最近刚好需要

回复
wx***86  
2020年05月21日

最近刚好需要

回复
qq***03  
2020年06月29日

谢谢分享!!!

回复
qq***03  
2020年07月04日

好资源,谢谢

回复
wx***61  
2020年12月15日

最近刚好需要

回复
my***ve  
2021年06月29日

谢谢分享.

回复
qq***19  
2022年02月22日

非常好,学习了!!

回复
qq***19  
2022年02月23日

最近刚好需要

回复
 文明上网,理性发言!   😉 阿里云幸运券,戳我领取
我的牛币余额:0
所需牛币:2 开始下载

牛币获取:签到、评论、充值    » 在线充值(10牛币=1元)