讲解版--功能特效，翻牌抽奖功能讲解

这个功能需要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>
<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); //保存未中奖信息
                });
            });
        });
    });
</script>

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;
    width: 1200px;
    height: 370px;
}

.fanp .u1{
    width: 1120px;
    margin: 0 auto;
}
.fanp .u1 li{
    float: left;
    width: 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;
}