砸金蛋被广泛应用于庆典活动、商家促销、电视娱乐等场合，它的趣味、悬念能迅速活跃现场气氛。同样，我们也可以将砸金蛋应用到WEB网站上，用于开展线上活动。本文将使用jQuery与PHP讲解如何实现一个WEB砸金蛋程序。<div class="egg"> <ul class="eggList"> <p class="hammer" id="hammer">锤子</p> <p class="resultTip" id="resultTip"><b id="result"></b></p> <li><span>1</span></li> <li><span>2</span></li> <li><span>3</span></li> </ul></div>

CSS.egg{width:660px; height:400px; margin:50px auto 20px auto;}.egg ul li{z-index:999;}.eggList{padding-top:110px;position:relative;width:660px;}.eggList li{float:left;background:url(images/egg_1.png) no-repeat bottom;width:158px;height:187px;cursor:pointer;position:relative;margin-left:35px;}.eggList li span{position:absolute; width:30px; height:60px; left:68px; top:64px; color:#ff0; font-size:42px; font-weight:bold}.eggList li.curr{background:url(images/egg_2.png) no-repeat bottom;cursor:default;z-index:300;}.eggList li.curr sup{position:absolute;background:url(images/img-4.png) no-repeat;width:232px; height:181px;top:-36px;left:-34px;z-index:800;}.hammer{background:url(images/img-6.png) no-repeat;width:74px;height:87px;position:absolute; text-indent:-9999px;z-index:150;left:168px;top:100px;}.resultTip{position:absolute; background:#ffc ;width:148px;padding:6px;z-index:500;top:200px; left:10px; color:#f60; text-align:center;overflow:hidden;display:none;z-index:500;}.resultTip b{font-size:14px;line-height:24px;}$(".eggList li").hover(function() { var posL = $(this).position().left + $(this).width(); $("#hammer").show().css('left', posL);})$(".eggList li").click(function() { $(this).children("span").hide(); eggClick($(this));});

function eggClick(obj) {	var _this = obj;	$.getJSON("data.php",function(res){//ajax请求		_this.unbind('click'); //解除click		$(".hammer").css({"top":_this.position().top-55,"left":_this.position().left+185});		$(".hammer").animate({//锤子动画			"top":_this.position().top-25,			"left":_this.position().left+125			},30,function(){				_this.addClass("curr"); //蛋碎效果				_this.find("sup").show(); //金花四溅				$(".hammer").hide();//隐藏锤子				$('.resultTip').css({display:'block',top:'100px',left:_this.position().                left+45,opacity:0})                .animate({top: '50px',opacity:1},300,function(){//中奖结果动画					if(res.msg==1){//返回结果						$("#result").html("恭喜，您中得"+res.prize+"!");					}else{						$("#result").html("很遗憾,您没能中奖!");					}				});				}		);	});}
$prize_arr = array(	'0' => array('id'=>1,'prize'=>'平板电脑','v'=>3),	'1' => array('id'=>2,'prize'=>'数码相机','v'=>5),	'2' => array('id'=>3,'prize'=>'音箱设备','v'=>10),	'3' => array('id'=>4,'prize'=>'4G优盘','v'=>12),	'4' => array('id'=>5,'prize'=>'Q币10元','v'=>20),	'5' => array('id'=>6,'prize'=>'下次没准就能中哦','v'=>50),);foreach ($prize_arr as $key => $val) {	$arr[$val['id']] = $val['v'];}$rid = getRand($arr); //根据概率获取奖项id$res['msg'] = ($rid==6)?0:1; //如果为0则没中$res['prize'] = $prize_arr[$rid-1]['prize']; //中奖项echo json_encode($res);//计算概率function getRand($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;}
通过设置概率，我们可以看出，砸中平板电脑的几率占3%，砸不中的几率占50%，点击来试试你的运气吧。