演示下载地址：/js...
效果图：
三个金蛋、一把锤子及中奖结果#result_tip代码如下：
锤子
1 2 3
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来试试你的运气吧。
演示下载地址：/js...
