基于JQuery PHP编写砸金蛋的获奖程序

首先给你看效果图：

查看演示下载源代码

准备工作/即将工作

我们需要准备道具(材料)，也就是相关的图片，包括金蛋、碎蛋、碎花、锤子。

超文本标记语言

我们想在我们的页面上展示的是一个扔金蛋的平台。平台上有三个编号为1、2、3的金蛋和一把锤子。我们构建以下html代码：

div class=' egg ' ul class=' egg list ' p class=' hammer ' id=' hammer ' hammer/p p class=' result tip ' id=' result ' b id=' result '/p lispan 1/span sup/sup/Li lispan 2/span sup/sup/Li lispan 3/span sup/sup/Li/ul/div在上述代码中，锤子被放置。resultTip用于显示砸蛋后的结果，即是否有奖，三个李分别放置三个金蛋。我们用CSS来修饰效果。

半铸钢钢性铸铁(Cast Semi-Steel)。鸡蛋{ width:660px高度：400 px；margin:50px汽车20px汽车；} .egg ul Li { z-index :999；} .egg list { padding-top :110 px；位置：相对；宽度width:660px} .eggList li { float:leftbackground : URL(images/egg _ 1 . png)无重复底部；宽度width:158px高度：187 px；cursor:pointer指针；位置：相对；边距-left :35 px；} .egg list Li span { position : absolute；宽度：30 px；高度：60 px；left:68pxtop:64pxcolor: # ff0font-size :42 px；font-weight:bold}。egg list Li . curr { background : URL(images/egg _ 2 . png)无重复底部；cursor:defaultz指数：300；} .egg list Li . curr sup { position : absolute；背景：url(images/img-4.png)无重复；宽度width:232pxheight:181pxtop :-36px；left :-34px；z指数：800；} .hammer { background : URL(images/img-6 . png)无重复；宽度：74 px；高度：87 px；位置：绝对；text-indent :-9999 px；z指数：150；left:168pxtop:100px} .result tip { position : absolute；背景# ffc宽度width:148pxpadding:6pxz指数：500；top:200pxleft:10pxcolor: # f60文本对齐：居中；飞越：隐藏；display:nonez指数：500；} .结果提示b { font-size :14 px；线高：24 px；}根据上面的代码，我们可以在页面上看到一个完整的扔金蛋的场景。请注意，我们使用png图片。如果您的客户仍然使用ie6，您可能需要处理png图片的透明度，但本文不会处理它。

jQuery

接下来，我们将使用jQuery代码实现砸金蛋、破蛋、展示中奖结果的全过程。当然，通常情况下，您必须首先为只使用jQuery实现的实例程序加载jQuery库文件。

首先，当鼠标滑动到金蛋时，用来砸金蛋的锤子只会靠在金蛋的右上角，可以利用position()来定位。

$('.egg list Li’)。hover(function(){ var POSl=$(this))。位置()。左$(这个)。宽度()；$(' #锤子')。显示()。css('left '，POSl)；})然后，点击金蛋，也就是用锤子砸金蛋的过程。我们首先在click中将编号的数字隐藏在金蛋中，然后调用自定义函数eggClick()。

$('.egg list Li’)。单击(function() { $(this))。儿童(' span ')。hide()；egg click($(this))；});最后，在自定义函数eggClick()中，我们使用jQuery的$。方法向后台data.php发送一个ajax请求，后台php程序将处理奖金分配并返回中奖结果。我们使用animate()来实现砸锤的动画，通过改变锤的顶部和左侧位置来实现简单的动画效果。锤子砸碎后，金蛋样式变为。curr，和金花同时散开，然后是获胜的结果。resultTip显示您是否获胜取决于您的运气和背景奖励中设置的获胜概率。看看金蛋函数eggClick()的代码：

函数egg click(obj){ var _ this=obj；$.getjson ('data.php '，function(RES){//Ajax request _ this . unbind(' click ')；//单击$('。锤子')。CSS ({'top' : _ this。位置()。top-55，“左”: _ this。位置()。left 185 })；$('.锤子')。动画({//锤子动画' top' : _ this。位置()。top-25，' left' : _ this。位置()。left125}，30，function () {_ this。addclass('。//碎蛋效果_this.find('sup ')。show()；//金花飞溅$('。锤子')。hide()；//隐藏锤子$('。result tip’)。CSS ({display:' block '，top:' 100px '，left: _ this。位置()。animate({ top : ' 50px ' Opacity :1 }，300，function(){//获胜结果动画if(res.msg==1){//返回结果$('#result ')。html('恭喜，res.prize '！' );}else{ $('#result ')。html('很遗憾，你没有获奖！' );} });} );});}为了将金蛋砸蛋计划真正融入您的网站，您可以在砸蛋前验证会员资格，限制砸蛋次数，并在中奖后留下联系方式，具体视网站要求而定。

服务器端编程语言（Professional Hypertext Preprocessor的缩写）

Data.php处理前端发送的ajax请求，然后我们使用概率算法，根据设定的获胜概率，以json格式输出获胜结果。概率计算示例，请参考：PHP jQuery实现翻牌抽奖

$ PRIZE _ arr=array(' 0 '=array(' ID '=1，' prize '=' tablet '，' v'=3)，' 1'=array ('id'=2，' prize'='数码相机'，' v'=5) 3'=array('id'=4，' prize'='4G USB闪存盘'，' V'=12)，' 4'=array ('ID'=5，' PRIZE'=' Q 10元'，' V'=20)，V '=50 '=array foreach($ PRIZE _ arr as $ key=$ 1} $ rid=GetRand($ arr)；//按照概率id $res['msg']=($rid==6)拿奖？0:1;//如果为0，将错过$ RES[' prize ']=$ prize _ arr[$ rid-1][' prize ']；//奖励echo JSON _ encode($ RES)；//计算概率函数get rand($ proar){ $ result=' '；//概率数组的总概率精度$ proSum=array _ sum($ proArr)；//概率数组循环foreach($ proarras $ key=$ procur){ $ rand num=mt _ rand(1，$ prosum)；if($ randNum=$ proCur){ $ result=$ key；打破；} else { $ PROsum-=$ ProCur；} } unset($ ProArr)；返回$ result}通过设置概率，我们可以看到击中平板电脑的概率为3%，没有击中的概率为50%。点击演示，试试你的运气。