jQuery砸金蛋_砸金蛋特效php
- WBOY原創
- 2016-06-07 11:39:121600瀏覽
本文将使用jQuery与PHP讲解如何实现一个WEB砸金蛋程序，首先我们需要准备素材，即金蛋图片、砸碎后的金蛋图片、砸碎后的碎花图片、以及锤子四张图片。
页面底部有演示、免费下载链接。若是想看更多js特效、网站源码、 js教程请访问 http://www.sucaihuo.com/js还有演示DEMO，最主要是可以免费下载。 <br>
1、<br>
三个金蛋、一把锤子及中奖结果#result_tip代码如下：<br>
<div> <br>
<ul> <br>
<p>锤子</p> <br>
<p><b></b></p> <br>
<li>
<span>1</span><sup></sup>
</li> <br>
<li>
<span>2</span><sup></sup>
</li> <br>
<li>
<span>3</span><sup></sup>
</li> <br>
</ul> <br>
</div>
<br>
2、<br>
1、当鼠标滑向金蛋时，锤子会仅靠金蛋右上方，通过position()来控制位置。<br>
$(".egg_list li").hover(function() { <br>
var position_left = $(this).position().left + $(this).width(); <br>
$("#hammer").show().css('left', position_left); <br>
})<br>
当挥动锤子砸向金蛋eggClick()前，我们先把金蛋中的数字编号隐藏起来。<br>
$(".eggList li").click(function() { <br>
$(this).children("span").hide(); <br>
eggClick($(this)); <br>
});<br>
最后，我们向后台ajax.php发送一个ajax请求，后台php程序会处理奖项分配并把中奖结果返回。我们使用animate()来实现砸锤子的动画，通过改变锤子的top和left位子来实现简单的动画效果，锤子砸下去后，金蛋样式变为.curruent，同时金花四溅，最后展现中奖结果，我们看下砸蛋的eggClick方法：<br>
function eggClick(obj) { <br>
$.get("ajax.php",function(data) { <br>
if (obj.hasClass("current")) { <br>
alert("蛋都碎了一地，刷新重新来过吧！"); <br>
return false; <br>
} <br>
$(".hammer").css({ <br>
"top": obj.position().top - 55, <br>
"left": obj.position().left + 185 <br>
}); <br>
$(".hammer").animate({ <br>
"top": obj.position().top - 25, <br>
"left": obj.position().left + 125 <br>
},30, function() { <br>
obj.addClass("current"); //蛋碎效果 <br>
obj.find("sup").show(); //金花四溅 <br>
$(".hammer").hide(); <br>
$('.result_tip').css({ <br>
display: 'block', <br>
top: '100px', <br>
left: obj.position().left + 45, <br>
opacity: 0 <br>
}).animate({ <br>
top: '50px', <br>
opacity: 1 <br>
}, <br>
300, <br>
function() { <br>
if (data.msg == 1) { <br>
$("#result").html("恭喜您中得" + data.prize_title + "！"); <br>
} else { <br>
$("#result").html("Sorry,您没能中奖!"); <br>
} <br>
}); <br>
}); <br>
}, <br>
"json") <br>
}<br>
3、<br>
最后我们看下ajax.php中奖项设置和计算中奖概率算法。<br>
$prize_arr = array( <br>
'0' => array('id' => 1, 'title' => 'iphone5s', 'v' => 5), <br>
'1' => array('id' => 2, 'title' => '联系笔记本', 'v' => 10), <br>
'2' => array('id' => 3, 'title' => '音箱设备', 'v' => 20), <br>
'3' => array('id' => 4, 'title' => '30GU盘', 'v' => 30), <br>
'4' => array('id' => 5, 'title' => '话费50元', 'v' => 10), <br>
'5' => array('id' => 6, 'title' => 'iphone6s', 'v' => 15), <br>
'6' => array('id' => 7, 'title' => '谢谢，继续加油哦！~', 'v' => 10), <br>
); <br>
<br>
foreach ($prize_arr as $key => $val) { <br>
$arr[$val['id']] = $val['v']; <br>
} <br>
<br>
$prize_id = getRand($arr); //根据概率获取奖品id <br>
$data['msg'] = ($prize_id == 7) ? 0 : 1; //如果为0则没中 <br>
$data['prize_title'] = $prize_arr[$prize_id - 1]['title']; //中奖奖品 <br>
echo json_encode($data); <br>
exit; //以json数组返回给前端 <br>
<br>
function getRand($proArr) { //计算中奖概率 <br>
$rs = ''; //z中奖结果 <br>
$proSum = array_sum($proArr); //概率数组的总概率精度 <br>
//概率数组循环 <br>
foreach ($proArr as $key => $proCur) { <br>
$randNum = mt_rand(1, $proSum); <br>
if ($randNum
$rs = $key; <br>
break; <br>
} else { <br>
$proSum -= $proCur; <br>
} <br>
} <br>
unset($proArr); <br>
return $rs; <br>
}<br>
通过ajax.php，我们可以看出共设置了7个奖项并设置了中奖概率，比如砸中”iphone5s“的几率占5%，砸不中的几率占10%，点击演示砸金蛋demo来试试你的运气吧。查看该特效演示及免费下载，请访问http://www.sucaihuo.com/js/17.html
AD：真正免费，域名+虚机+企业邮箱=0元