素材牛VIP会员

jQuery砸金蛋_PHP砸金蛋实例教程

 所属分类:PHP/MySql-常用实例教程

 浏览:8162次-  下载:882次-  评论:19次-  更新时间:2020-08-31
jQuery砸金蛋_PHP砸金蛋实例教程
积分说明:注册即送15牛币,每日签到可获得5牛币,成为VIP会员可永久免牛币下载!   充值积分   充值会员   更多说明»
素材描述:本文将使用jQuery与PHP讲解如何实现一个WEB砸金蛋程序,首先我们需要准备素材,即金蛋图片、砸碎后的金蛋图片、砸碎后的碎花图片、以及锤子四张图片。
 标签:砸蛋砸金蛋

基础属性

  • 难易中级
  • 语言PHP
  • 数据库

详细介绍

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来试试你的运气吧。

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

追***忆  
2020年03月01日

砸金蛋真实好东西

回复
zh***23  
2020年03月07日

可以在网站中做抽奖系统,多少积分一次

回复
54***66  
2020年03月11日

效果挺好的 ,就是一个蛋只能咋一次,想在咋,就得刷新!

回复
鸭***咬  
2020年03月29日

如果能带上数据库就更好了

回复
bi***am  
2020年04月08日

页面很好啊,大牛

回复
逆***团  
2020年04月15日

我想要的,刚好你有

回复
Ja***jz  
2020年04月24日

挺有用的~

回复
黑***黑  
2020年04月25日

很好值得学习。。。

回复
ni***07  
2020年04月26日

砸金蛋的特效差一点,其他都蛮好

回复
lo***ge  
2020年05月05日

只能砸一个金蛋呢

回复
西***千  
2020年05月16日

效果有点糙

回复
钢***侠  
2020年05月17日

下下来 试试

回复
这***3  
2020年05月19日

怎么会这么厉害!!!

回复
L***灬  
2020年05月22日

好得不得了,很好,可以用的

回复
li***ng  
2020年07月07日

做得不错,很好用

回复
陈***丶  
2020年07月20日

很是实用啊~

回复
疯***了  
2020年07月31日

好得不得了,很好,可以用的

回复
ba***ag  
2020年08月19日

这个也是用ajax和后台进行交互的啊,看起来很不错的嘛。

回复
qq***19  
2020年11月05日

特效很好;但能放入奖品图就更好了!

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

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