基于JQuery+PHP编写砸金蛋中奖程序(jquery编程)

编辑：rootadmin

推荐整理分享基于JQuery+PHP编写砸金蛋中奖程序(jquery编程)，希望有所帮助，仅作参考，欢迎阅读内容。

文章相关热门搜索词:php jquery教程,用jquery,jquery编程,jquery编程,php100 jquery教程,jquery教程 csdn,jquery编程,jquery编程,内容如对您有帮助，希望把文章链接给更多的朋友！

首先给大家展示效果图：

查看演示下载源码

准备工作

我们需要准备道具（素材），即相关图片，包括金蛋图片、蛋砸碎后的图片、砸碎后的碎花图片、以及锤子图片。

HTML

我们页面上要展现的是一个砸金蛋的台子，台上放了编号为1，2，3的三个金蛋，以及一把锤子。我们构建以下html代码：

上述代码中，.hammer放置锤子，.resultTip用于砸蛋后显示的结果，即有没有中奖，三个li分别放置3个金蛋，我们用CSS来装饰下效果。

CSS

按照上面的代码我们可以在页面中看到一个完整的砸金蛋场景，注意我们使用了png图片，如果你的客户仍在使用ie6的话，你可能需要对png图片的透明做处理，本文不做处理。

jQuery

接下来，我们要用jQuery代码来实现砸金蛋、碎蛋、展示中奖结果的整个过程。当然，老规矩，对于才用jQuery实现的实例程序，你必须先载入jQuery库文件。

首先，当鼠标滑向金蛋时，用于砸金蛋的锤子会仅靠金蛋右上方，可以使用position()来定位。

然后，点击金蛋，即挥动锤子砸向金蛋的过程。我们在click中先把金蛋中的编号数字隐藏，然后调用自定义函数eggClick()。

最后，在自定义函数eggClick()中，我们使用jQuery的$.getJSON方法向后台data.php发送一个ajax请求，后台php程序会处理奖项分配并把中奖结果返回。我们使用animate()来实现砸锤子的动画，通过改变锤子的top和left位子来实现简单的动画效果，锤子砸下去后，金蛋样式变为.curr，同时金花四溅，然后中奖结果.resultTip展示，有没有中奖要看你的运气和后台奖项设置的中奖几率了。来看砸金蛋函数eggClick()的代码：

为了将砸金蛋程序更真实的结合到你的网站中，你可以在砸蛋前验证会员身份，限制砸蛋次数、砸蛋中奖后留下联系方式等等措施，具体看网站需求了。

PHP

data.php处理前端发送的ajax请求，我们才用概率算法，根据设置好的中奖概率，将中奖结果以json的格式输出。关于概率计算的例子可以参照：PHP+jQuery实现翻板抽奖

通过设置概率，我们可以看出，砸中平板电脑的几率占3%，砸不中的几率占%，点击演示demo来试试你的运气吧。

ThinkPHP函数详解之M方法和R方法首先给大家介绍ThinkPHP函数详解：M方法M方法用于实例化一个基础模型类，和D方法的区别在于：1、不需要自定义模型类，减少IO加载，性能较好；2、实

PHP判断来访是搜索引擎蜘蛛还是普通用户的代码小结 1、推荐的一种方法：php判断搜索引擎蜘蛛爬虫还是人为访问代码,摘自Discuzx3.2phpfunctioncheckrobot($useragent=''){static$kw_spiders=array('bot','crawl','spider','slurp','sohu-

php生成静态html页面的方法(2种方法) 因为每次用户点击动态链接的时候都会对服务器发送数据查询的要求，对于一个访问量可能达百万千万级别的网站来说这无疑是服务器一个大大的负担

标签: jquery编程

本文链接地址:https://www.jiuchutong.com/biancheng/284411.html 转载请保留说明！

上一篇：ubuntu下配置nginx+php+mysql详解(ubuntu设置nginx开机启动)

下一篇：ThinkPHP函数详解之M方法和R方法(thinkphp i方法)