页面底部有演示、免费下载链接。若是想看更多js特效、网站源码、 js教程请访问 http://www.sucaihuo.com/js还有演示demo，最主要是可以免费下载。
1、
三个金蛋、一把锤子及中奖结果#result_tip代码如下：
锤子
1
2
3
2、
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)
}
3、
最后我们看下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 $rs = $key;
break;
} else {
$prosum -= $procur;
}
}
unset($proarr);
return $rs;
}
通过ajax.php，我们可以看出共设置了7个奖项并设置了中奖概率，比如砸中”iphone5s“的几率占5%，砸不中的几率占10%，点击演示砸金蛋demo来试试你的运气吧。查看该特效演示及免费下载，请访问http://www.sucaihuo.com/js/17.html
ad：真正免费，域名+虚机+企业邮箱=0元