A _php example of the program for smashing Golden eggs based on jquery+php

First to show you the effect of the picture:

View Demo Download source code

Preparatory work

We need to prepare props (material), that is, the relevant pictures, including the golden egg picture, the egg after smashing the picture, the shattered floral pictures, as well as the hammer picture.

Html

Our page is to show a hit on the golden egg of the table, on the stage with the number of 1,2,3 three golden eggs, and a hammer. We build the following HTML code:

<div class= "Egg" > 
 <ul class= "egglist" > 
 <p class= "Hammer" id= "Hammer" > Hammer </p> 
 <p class= "Resulttip" id= "Resulttip" ><b id= "result" ></b></p> 
 <li><span>1 </span><sup></sup></li> 
 <li><span>2</span><sup></sup ></li> 
 <li><span>3</span><sup></sup></li> 
 </ul> 
</div> 

In the above code,. Hammer Place the hammer,. Resulttip used to hit the egg after the results show that there is no jackpot, three Li placed 3 golden eggs, we use CSS to decorate the effect.

Css

. egg{width:660px height:400px; margin:50px auto 20px Auto; 
. Egg ul li{z-index: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;} 
. Hammer{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 hit golden egg scene in the page, note that we use the PNG image, if your customer is still using IE6, you may need to be transparent to the PNG image processing, this article does not handle.

Jquery

Next, we'll use the jquery code to implement the whole process of smashing golden eggs, crushing eggs, and showing the results of the lottery. Of course, as usual, you must first load the jquery library file for an instance program that is implemented in jquery.

First, when the mouse slides toward the golden egg, the hammer used to smash the golden egg will depend only on the top right of the golden egg and can be positioned using position ().

$ (". Egglist li"). Hover (function () { 
 var Posl = $ (). Position (). Left + $ (this). width (); 
 $ ("#hammer"). Show (). CSS (' left ', POSL); 

Then, click on the golden Egg, which is the process of swinging the hammer into the golden egg. In the click, we first hide the number number in the golden egg, 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 backend data.php, which processes the award assignment and returns the winning results. We use animate () to animate the hammer, by changing the top and left seats of the hammer to achieve a simple animation effect, after the hammer hit down, The golden egg style becomes. Curr, meanwhile the golden Flower Splash, and then the lottery results. Resulttip shows that there is no winning chance to see your luck and backstage awards set the winning odds. To see the golden Egg function Eggclick () code:

function Eggclick (obj) { 
 var _this = obj; 
 $.getjson ("data.php", function (res) {//ajax request 
 _this.unbind (' click ');//Lift Click 
 $ (". Hammer"). 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},30 
 , function () { 
 _this.addclass ("Curr");//Egg Crush effect 
 _this.find ("Sup"). Show ();//Golden Flower Splash 
 $ (". Hammer"). Hide ()// Hide Hammer 
 $ ('. Resulttip '). CSS ({display: ' Blocks ', top: ' 100px ', left:_this.position (). 
 left+45,opacity:0}) 
 . Animate ({top: ' 50px ', opacity:1},300,function () {//Jackpot Results Animation 
  if (res.msg==1) {//return result 
  $ ("#result"). HTML ("Congratulations, you get" +res.prize+ "); 
  } else{ 
  $ ("#result"). HTML ("Unfortunately, you failed to win!");} 
 } 
 ); 

In order to break the Golden egg program more real integration into your site, you can in the egg before the verification of membership, limit the number of hit eggs, hit the egg after leaving contact methods and so on, specific look at the site needs.

Php

Data.php handles the Ajax requests sent by the front end, we use the probability algorithm to output the winning result in JSON format according to the set winning probability. Examples of probability calculation can refer to: php+jquery to achieve the flip-board lottery

 $prize _arr = Array (' 0 ' => array (' ID ' =>1, ' prize ' => ' tablet computer ', ' V ' =>3 '), ' 1 ' =&G T Array (' ID ' =>2, ' Prize ' => ' digital camera ', ' V ' =>5 '), ' 2 ' => array (' ID ' =>3, ' Prize ' => ' Speaker device ', ' V ' =>10), ' 3 ' = > Array (' ID ' =>4, ' Prize ' => ' 4G USB drive ', ' V ' =>12 '), ' 4 ' => array (' ID ' =>5, ' Prize ' => ' Q-Currency ', ' V ' =>20 '), ' 
5 ' => array (' ID ' =>6, ' Prize ' => ' next time may be able to be in the Oh ', ' V ' =>50),); 
foreach ($prize _arr as $key => $val) {$arr [$val [' id ']] = $val [' V ']; } $rid = Getrand ($arr); Get the award ID according to probability $res [' msg '] = ($rid ==6)? 0:1; If 0 is not $res [' prize '] = $prize _arr[$rid -1][' Prize ']; 
In the award echo Json_encode ($res); 
 Compute probability function Getrand ($PROARR) {$result = '; 
 The total probability precision of probability array $proSum = Array_sum ($PROARR); 
 Probability array loop foreach ($proArr as $key => $proCur) {$randNum = Mt_rand (1, $proSum); 
 if ($randNum <= $proCur) {$result = $key; 
 Break 
 else {$proSum-= $proCur; 
 } unset ($PROARR); 
return $result; }

By setting the probability, we can see that the chance to hit the tablet computer 3%, hit the odds of 50%, click Demo demo to try your luck.