Smashing golden egg: jquery+php realization of smashing golden egg winning program

The original smashing golden egg: jquery+php realization of smashing golden egg winning program

Smashing golden eggs are widely used in celebrations, business promotion, television entertainment, and its fun, suspense can quickly active scene atmosphere. Also, we can apply a smashing golden egg to a Web site for online activity. This article will use jquery and PHP to explain how to implement a Web smashing Golden egg program.

View Demo Download source code

Preparation We need to prepare props (material), that is, related pictures, including the golden egg Pictures, the pictures after the broken eggs, broken flowers pictures, as well as the hammer pictures. HTML on our page to show is a smashing golden egg table, placed on the stage numbered 1,2, 3 of three golden eggs, and a hammer. We build the following HTML code:<divclass= "Egg" > <ulclass= "Egglist" > <pclass= "Hammer" id= "Hammer" > Hammers </p> <pclass= "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 break the egg display results, 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() {     varPOSL = $ (this). Position (). Left + $ (this).width (); $("#hammer"). Show (). CSS (' left ',POSL); Then, click on the golden Egg, which is the process of swinging the 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 (); Eggclick ($ (this)); }); Finally, in the Custom Function Eggclick (), we use jquery's $The. Getjson method sends an AJAX request to the background data.php, which handles the prize 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, the golden egg style changed to. curr, while Golden Flower Splash, and then winning results.Resulttip show that there is no winning chance to see your luck and background awards set. Look at the code that smashed the golden egg function Eggclick ():functionEggclick (obj) {var_this =obj; $. Getjson ("data.php",function(RES) {//Ajax Requests_this.unbind (' click ');//Dismiss 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 Crushing effect_this.find ("Sup"). Show ();//Golden Flower Splash$ (". Hammer"). Hide ();//Hidden Hammers$ ('. Resulttip '). CSS ({display: ' Block ', Top: ' 100px ', left:_this.position (). Left+45,opacity:0})                 . Animate ({top: ' 50px ', opacity:1},300,function(){//Winning results animations                    if(res.msg==1) {//return Results$ ("#result"). HTML ("Congratulations, you've got the +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, the egg after winning the contact method and so on, the specific look at the site needs. Phpdata. PHP handles the AJAX requests sent by the front-end, and we use the probabilistic algorithm to output the winning results in JSON format based on the probability of winning the jackpot. Examples of probability calculations can be referred to: php+jquery draw for a flip board$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 ' =>20), ' 5 ' =Array(' id ' =>6, ' prize ' = ' = ' 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 based on probability$res[' msg '] = ($rid==6)? 0:1;//if 0 is not in the$res[' prize '] =$prize _arr[$rid-1][' Prize '];//Chinese AwardsEchoJson_encode ($res); //Calculate probabilityfunctionGetrand ($PROARR) {     $result= ' '; //the total probability accuracy 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 odds of hitting the tablet are 3.%, the odds of hitting a 50%, click Demo demo to try your luck. Disclaimer: This article is the original article, Helloweba. com and author have copyright, if need to reprint, please specify from helloweba.com and retain the original link, otherwise regarded as infringement.

Smashing golden egg: jquery+php realization of smashing golden egg winning program