翻牌抽奖功能讲解

这个功能需要5个东西 php+html+css+jquery+js

php:data.php

<?php
//概率计算
function get_rand($proArr) {
    $result = '';

    //概率数组的总概率精度
    $proSum = array_sum($proArr);

    //概率数组循环
    foreach ($proArr as $key => $proCur) {
        $randNum = mt_rand(1, $proSum);
        if ($randNum <= $proCur) {
            $result = $key;
            break;
        } else {
            $proSum -= $proCur;
        }
    }
    unset ($proArr);

    return $result;
}
//奖品字段
$prize_arr = array(
    '0' => array('id'=>1,'prize'=>'奖品1','v'=>1),
    '1' => array('id'=>2,'prize'=>'奖品2','v'=>10),
    '2' => array('id'=>3,'prize'=>'奖品3','v'=>10),
    '3' => array('id'=>4,'prize'=>'奖品4','v'=>20),
    '4' => array('id'=>5,'prize'=>'奖品5','v'=>20),
    '5' => array('id'=>6,'prize'=>'奖品6','v'=>20),
);
//抽中获取
foreach ($prize_arr as $key => $val) {
    $arr[$val['id']] = $val['v'];
}

$rid = get_rand($arr); //根据概率获取奖项id

$res['yes'] = $prize_arr[$rid-1]['prize']; //中奖项
unset($prize_arr[$rid-1]); //将中奖项从数组中剔除，剩下未中奖项
shuffle($prize_arr); //打乱数组顺序
for($i=0;$i<count($prize_arr);$i++){
    $pr[] = $prize_arr[$i]['prize'];
}
$res['no'] = $pr;
echo json_encode($res);
?>

js

首先引入插件：

<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.7.2.custom.min.js"></script>
<script type="text/javascript" src="js/jquery.flip.min.js"></script>

$(function(){
    $("#prize li").each(function(){
        var p = $(this);
        p.click(function(){
            $("#prize li").unbind('click');
            $.getJSON("data.php",function(json){
                var prize = json.yes;
                console.log(prize);
                $("#pre").append(prize);
                p.flip({
                    direction:'rl',
                    color:"#d6000f",
                    content:prize,
                    onEnd: function(){
                        p.css({"font-size":"22px","line-height":"168px",background:'url("img/f2.gif")',color:"#f6cf63","text-align":"center"});
                        p.attr("id","r");
                        $("#modf").show();
                        $("#prize li").unbind('click').css("cursor","default").removeAttr("title");
                    }
                });
                $("#data").data("nolist",json.no); //保存未中奖信息
            });
        });
    });
});

html:index.html

<div class="fanp">
    <ul class="u1" id="prize">
        <li><p>1</p></li>
        <li class="licen"><p>2</p></li>
        <li><p>3</p></li>
        <li class="lilef"><p>4</p></li>
        <li><p>5</p></li>
    </ul>
    <div id="data"></div>
</div>

css:type.css

.fanp{
    position: absolute;
    bottom: 2px;
    left: 50%;margin-left: -600px;
     1200px;
    height: 370px;
}

.fanp .u1{
     1120px;
    margin: 0 auto;
}
.fanp .u1 li{
    float: left;
     295px;
    height: 185px;
    position: relative;
    background: url("../../img/f1.gif");
    cursor:pointer;
}
.licen{
    margin: 0 115px;
}
.lilef{
    margin:0 115px 0 218px;
}
.fanp .u1 li p{
    position: absolute;
    top: -10px;left: 50%;margin-left: -30px;
    font-size: 60px;
    color: #f6cf63;
}