最新赞助活动温馨提示:自愿赞助服务器费用,学生和没有工作的整站资源免费下载!
头像

jQuery砸金蛋_PHP砸金蛋

来源:http://www.erdangjiade.com/ 沐浴春风 2014-12-09 18:28浏览(3503)

本文将使用jQuery与PHP讲解如何实现一个WEB砸金蛋程序,首先我们需要准备素材,即金蛋图片、砸碎后的金蛋图片、砸碎后的碎花图片、以及锤子四张图片。

0、请不要问“在不在”之类的问题,有问题直接问!1、学生或暂时没有工作的童鞋,整站资源免费下载!2、¥9.9充值终身VIP会员,加我微信,826096331 拉你进VIP群学习!3、程序员加油,技术改变世界。在线 充值

jQuery砸金蛋_PHP砸金蛋
分类:图片代码 > 鼠标滑过 难易:中级
查看演示

加我微信,拉你进VIP群学习:

下载资源 下载积分: 50 积分

HTML

三个金蛋、一把锤子及中奖结果#result_tip代码如下:

<div class="egg"> 
   <ul class="egg_list"> 
    <p class="hammer" id="hammer">锤子</p> 
    <p class="result_tip" id="result_tip"><b id="result"></b></p> 
    <li><span>1</span><sup></sup></li> 
    <li><span>2</span><sup></sup></li> 
    <li><span>3</span><sup></sup></li> 
   </ul> 
</div>

jQuery

1、当鼠标滑向金蛋时,锤子会仅靠金蛋右上方,通过position()来控制位置。

$(".egg_list li").hover(function() {
    var position_left = $(this).position().left + $(this).width();
    $("#hammer").show().css('left', position_left);
})

当挥动锤子砸向金蛋eggClick()前,我们先把金蛋中的数字编号隐藏起来。

$(".eggList li").click(function() { 
    $(this).children("span").hide(); 
    eggClick($(this)); 
});

最后,我们向后台ajax.php发送一个ajax请求,后台php程序会处理奖项分配并把中奖结果返回。我们使用animate()来实现砸锤子的动画,通过改变锤子的top和left位子来实现简单的动画效果,锤子砸下去后,金蛋样式变为.curruent,同时金花四溅,最后展现中奖结果,我们看下砸蛋的eggClick方法:

function eggClick(obj) {
    $.get("ajax.php",function(data) {
        if (obj.hasClass("current")) {
            alert("蛋都碎了一地,刷新重新来过吧!");
            return false;
        }
        $(".hammer").css({
            "top": obj.position().top - 55,
            "left": obj.position().left + 185
        });
        $(".hammer").animate({
            "top": obj.position().top - 25,
            "left": obj.position().left + 125
        },30, function() {
            obj.addClass("current"); //蛋碎效果
            obj.find("sup").show(); //金花四溅
            $(".hammer").hide();
            $('.result_tip').css({
                display: 'block',
                top: '100px',
                left: obj.position().left + 45,
                opacity: 0
            }).animate({
                top: '50px',
                opacity: 1
            },
            300,
            function() {
                if (data.msg == 1) {
                    $("#result").html("恭喜您中得" + data.prize_title + "!");
                } else {
                    $("#result").html("Sorry,您没能中奖!");
                }
            });
        });
    },
    "json")
}

最后我们看下ajax.php中奖项设置和计算中奖概率算法。

$prize_arr = array(
    '0' => array('id' => 1, 'title' => 'iphone5s', 'v' => 5),
    '1' => array('id' => 2, 'title' => '联系笔记本', 'v' => 10),
    '2' => array('id' => 3, 'title' => '音箱设备', 'v' => 20),
    '3' => array('id' => 4, 'title' => '30GU盘', 'v' => 30),
    '4' => array('id' => 5, 'title' => '话费50元', 'v' => 10),
    '5' => array('id' => 6, 'title' => 'iphone6s', 'v' => 15),
    '6' => array('id' => 7, 'title' => '谢谢,继续加油哦!~', 'v' => 10),
);

foreach ($prize_arr as $key => $val) {
    $arr[$val['id']] = $val['v'];
}

$prize_id = getRand($arr); //根据概率获取奖品id
$data['msg'] = ($prize_id == 7) ? 0 : 1; //如果为0则没中 
$data['prize_title'] = $prize_arr[$prize_id - 1]['title']; //中奖奖品
echo json_encode($data);
exit; //以json数组返回给前端

function getRand($proArr) { //计算中奖概率
    $rs = ''; //z中奖结果
    $proSum = array_sum($proArr); //概率数组的总概率精度
    //概率数组循环
    foreach ($proArr as $key => $proCur) {
        $randNum = mt_rand(1, $proSum);
        if ($randNum <= $proCur) {
            $rs = $key;
            break;
        } else {
            $proSum -= $proCur;
        }
    }
    unset($proArr);
    return $rs;
}

通过ajax.php,我们可以看出共设置了7个奖项并设置了中奖概率,比如砸中”iphone5s“的几率占5%,砸不中的几率占10%,点击演示砸金蛋demo来试试你的运气吧。

标签: 砸金蛋砸蛋
声明:本文为原创文章,如需转载,请注明来源erdangjiade.com并保留原文链接:https://www.erdangjiade.com/js/17.html
评论6
头像

友情提示:垃圾评论一律封号 加我微信:826096331拉你进VIP群学习群

  • 头像 5楼
    03-08 21:40
    netvlan
    功能和介绍不错。赞
  • 头像 4楼
    11-03 09:41
    ngu137
    功能不错啊。。。。。。皱眉高兴
  • 头像 3楼
    10-18 09:12
    qq562140910
    效果很好~~~~
  • 头像 板凳
    09-25 13:57
    昵称
    效果显著
  • 头像 椅子
    09-14 21:18
    799286778
    非常不错的效果
  • 头像 沙发
    03-20 10:46
    halcyon_yan
    看着效果不错,代码简单清晰
1 2