Shulou(Shulou.com)06/01 Report--

This article mainly introduces the relevant knowledge of "how to write the golden egg winning program with JQuery+PHP". The editor shows you the operation process through the actual case, the operation method is simple and fast, and the practicality is strong. I hope this article "how to use JQuery+PHP to write the golden egg winning program" can help you solve the problem.

First of all, I'd like to show you the effect picture:

View the demo and download the source code

Preparatory work

We need to prepare props (material), that is, related pictures, including pictures of golden eggs, broken eggs, broken flowers, and hammers.

HTML

What we want to show on our page is a platform for smashing golden eggs, on which there are three golden eggs numbered 1pyr2 and 3, and a hammer. We build the following html code:

Hammer

1 2 3

In the above code, .CSS places a hammer and .resultTip is used to display the results after smashing eggs, that is, whether or not you win the lottery, three li each put three golden eggs, and we decorate the effect with CSS.

CSS

.egg {width:660px; height:400px; margin:50px auto 20px auto;} .egg ul li {zmurindexvir 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;} .egglist {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;}

According to the above code we can see a complete golden egg scene on the page, note that we use png images, if your customers are still using ie6, you may need to deal with the transparency of png images, this article will not deal with.

JQuery

Next, we will use jQuery code to achieve the whole process of smashing golden eggs, breaking eggs, and showing the winning results. Of course, the old rule is that for an example program implemented in jQuery, you must first load the jQuery library file.

First of all, when the mouse is over the golden egg, the hammer used to smash the golden egg will only rely on the top right of the golden egg, and you can use position () to locate it.

$(".eggList li") .hover (function () {var posL = $(this). Position (). Left + $(this). Width (); $("# hammer"). Show (). Css ('left', posL);})

Then, click on the golden egg, that is, the process of hitting the golden egg with a hammer. We first hide the numbered numbers in the golden egg in click, and then call the custom function eggClick ().

$(".eggList li") .click (function () {$(this) .children ("span"). Hide (); eggClick ($(this));})

Finally, in the custom function eggClick (), we use the $.getJSON method of jQuery to send an ajax request to the background data.php, and the background php program will process the award allocation and return the winning result. We use animate () to achieve the animation of smashing the hammer, by changing the top and left positions of the hammer to achieve a simple animation effect. After the hammer is dropped, the style of the golden egg becomes .curr, while the golden flowers are splashed everywhere, and then the winning result is displayed. Whether you win the prize depends on your luck and the chance of winning the award in the background. Let's take a look at the code that smashes the golden egg function eggClick ():

Function eggClick (obj) {var _ this = obj; $.getJSON ("data.php", function (res) {/ / ajax request _ this.unbind ('click'); / / remove click $(".requests") .css ({"top": _ this.position () .top-55, "left": _ this.position () .left+185})) $(".hammer") .animate ({/ / Hammer animation "top": _ this.position () .top-25, "left": _ this.position () .left+125}, 30no function () {_ this.addClass ("curr"); / / shredding effect _ this.find ("sup") .show (); / / Golden Flower splashing $(".flowers") .hide () / / hide hammer $('.resultTip') .css ({display:'block',top:'100px',left:_this.position (). Left+45,opacity:0}) .animate ({top: '50pxhammer training opacity1}, 300) function () {/ / winning result animation if (res.msg==1) {/ / returns the result $("# result"). Html ("Congratulations, you won" + res.prize+ "!");} else {$("# result"). Html ("I'm sorry you didn't win!";})

In order to more realistically integrate the golden egg smashing program into your website, you can verify your membership before smashing, limit the number of times, leave contact information after winning the prize, and so on, depending on the needs of the site.

PHP

When data.php processes the ajax request sent by the front end, we use the probability algorithm to output the winning result in json format according to the set winning probability. For an example of probability calculation, please refer to PHP+jQuery to realize the flipping raffle.

$prize_arr = array ('0' = > array ('id'= > 1 prizebag = >' tablet', 'vault = > 3),' 1' = > array ('id'= > 2primer primer = >' digital camera', 'vault = > 5),' 2' = > array ('id'= > 3primer prizebag = >' speaker device', 'vault = > 10),' 3' = > array ('id'= > 4primer primer = > 4G flash drive', 'vault = > 12)) '4' = > array (' id'= > 5 minutes prizecoat = >'QD 10', 'vaults = > 20),' 5' = > array ('id'= > 6 prizestones = >' maybe you can win next time', 'vicious = > 50),) Foreach ($prize_arr as $key = > $val) {$arr [$val ['id']] = $val [' v'];} $rid= getRand ($arr); / / id $res ['msg'] = ($rid==6)? 0V1 based on probability; / / if 0, miss $res [' prize'] = $prize_arr [$rid-1] ['prize']; / / Award echo json_encode ($res); / / calculate probability function getRand ($proArr) {$result ='' / / the total probability precision of the probability array $proSum = array_sum ($proArr); / / the probability array cyclic foreach ($proArr as $key = > $proCur) {$randNum = mt_rand (1, $proSum); if ($randNum)

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.