_php instance of winning program of smashing Golden egg based on jquery+php

First show us:

View Demo Download source code

Preparatory work

We need to prepare props (materials), which are related images, including pictures of golden eggs, pictures of smashed eggs, pictures of broken flowers, and hammer pictures.

Html

On our page, we're going to show a table with golden eggs, three golden eggs numbered in three-to-one, and a hammer. We build the following HTML code:

  
 
  
  
  
  
   
   
Hammer
  
  
   
   
  
  
   
   
1
  
  
   
   
2
  
  
   
   
3
  
 
  
  
  

In the code above,. Hammer Place the hammer,. Resulttip is used to throw the egg after the result of the display, that is, there is no winning, three Li respectively 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 in the page a complete smashing golden egg scene, note that we use a PNG image, if your customer is still using IE6, you may need to do a PNG image transparent processing, this article does not do processing.

Jquery

Next, we will use jquery code to achieve the whole process of smashing golden eggs, breaking eggs, and showing the results of the winning. Of course, the usual, you must first load the jquery library file for the instance program that was implemented with jquery.

First, when the mouse slide to the golden egg, the hammer used to smash the golden egg will only rely on the upper right of the golden egg, you can use position () to locate.

$ (". Egglist li"). Hover (function () {  var Posl = $ (this). Position (). Left + $ (this). width ();  

Then, click on the golden Egg, that is, the process of waving a hammer to the golden egg. We hide the numbered numbers in the golden eggs first in the click and call the Custom function Eggclick ().

$ (". Egglist li"). Click (function () {  $ (this). Children ("span"). Hide ();  

Finally, in the Custom Function Eggclick (), we use jquery's $.getjson method to send an AJAX request to the background data.php, which handles the award assignment and returns the winning result. We use animate () to achieve the animation of smashing 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 changes to. Curr, while Golden Flower Splash, and then the winning result. Resulttip Show, there is no winner to see your Luck and background awards set the odds of winning. Look at the code that smashed the golden egg function Eggclick ():

function Eggclick (obj) {  var _this = obj;  $.getjson ("data.php", function (res) {//ajax request  _this.unbind (' click ');//Remove 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 effect  _this.find ("Sup"). Show ();//Golden Flower Splash  $ (". Hammer"). Hide ();/ Hide Hammer  $ ('. Resulttip '). CSS ({display: ' Block ', Top: ' 100px ', left:_this.position ().  left+45,opacity:0})  . Animate ({top: ' 50px ', opacity:1},300,function () {//winning result animation   if (res.msg==1) {//return result   $ ("#result"). HTML ("Congratulations, you've Got" +res.prize+ ");   } else{   $ ("#result"). HTML ("Unfortunately, you didn't win!");}   );  }  );  

In order to break the Golden egg program more real combination to your site, you can hit the egg before the identification of membership, limit the number of eggs hit, after hitting the egg after winning the contact method and so on, specifically to see the site needs.

Php

Data.php handles the Ajax requests sent by the front end, we use the probabilistic algorithm to output the winning results in JSON format, based on the probability of winning a set. Examples of probability calculations can be referred to: php+jquery realization of the Board draw

 $prize _arr = Array (' 0 ' = = Array (' ID ' =>1, ' prize ' = ' tablet ', ' V ' =>3), '  1 ' = = Array (' ID ' =>2, ' prize ' = ' digital camera ', ' V ' =>5), ' 2 ' = = Array (' ID ' =>3, ' prize ' = ' speaker device ', ' V ' =>10), ' 3 ' = = Array (' ID ' =>4, ' prize ' = ' 4G usb ', ' V ' =>12), ' 4 ' = = Array (' ID ' =>5, ' prize ' = ' Q ' $10 ', ' V ' = The ' 5 ' = = Array (' ID ' =>6, ' prize ' = ' = ' next time it will be able to be in oh ', ' V ' =>50); foreach ($prize _arr as $key + $val) {$arr [$val [' id ']] = $val [' V '];} $rid = Getrand ($arr); Get the prize ID according to probability $res [' msg '] = ($rid ==6)? 0:1; If 0 is not $res [' prize '] = $prize _arr[$rid -1][' Prize ']; In the awards echo Json_encode ($res);  Calculates the probability function Getrand ($PROARR) {$result = ';  The total probability accuracy of the 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 of hitting a tablet is 3%, the odds of hitting it is 50%, click Demo demo to try your luck.

