JQuery golden egg _ special effect php

Provides various official and user-released code examples and code reference. You are welcome to exchange and learn this article will use jQuery and PHP to explain how to implement a WEB tool. First, we need to prepare materials, that is, four images of golden eggs, the broken golden eggs, the broken floral images, and the hammer.


The demo and Free Download Links are available at the bottom of the page. For more js special effects, website source code, and js tutorials, visit http://www.sucaihuo.com/jsand demo. The most important thing is to download them for free.
1,
Three golden eggs, a hammer, and the winning result # The result_tip code is as follows:

Hammers





• 1


• 2


• 3

2,
1. When the mouse slides to the egg, the hammer will only rely on the top right of the egg and control the position through position.
$ (". Egg_list li"). hover (function (){
Var position_left = $ (this). position (). left + $ (this). width ();
$ ("# Hammer" ).show().css ('left', position_left );
})
Before waving a hammer to the eggClick (), we should first hide the numbers in the egg.
$ (". EggList li"). click (function (){
$ (This). children ("span"). hide ();
EggClick ($ (this ));
});
Finally, we send an ajax request to the background ajax. php. The background php program will process the award assignment and return the winning result. We use animate () to achieve the animation of the hammer. By changing the top and left seats of the hammer, we can achieve a simple animation effect. After the hammer falls down, the golden egg style changes. curruent, with a splash of gold at the same time, finally shows the winning result. Let's look at the eggClick method of the eggClick:
Function eggClick (obj ){
$. Get ("ajax. php", function (data ){
If (obj. hasClass ("current ")){
Alert ("the eggs are all broken. Refresh and try again! ");
Return false;
}
$ (". Hammer" ).css ({
"Top": obj. position (). top-55,
"Left": obj. position (). left + 185
});
$ (". Hammer"). animate ({
"Top": obj. position (). top-25,
"Left": obj. position (). left + 125
}, 30, function (){
Obj. addClass ("current"); // fragment Effect
Obj. find ("sup"). show (); // treasure splash
$ (". Hammer"). hide ();
Certificate ('.result_tip'}.css ({
Display: 'block ',
Top: '100px ',
Left: obj. position (). left + 45,
Opacity: 0
}). Animate ({
Top: '50px ',
Opacity: 1
},
300,
Function (){
If (data. msg = 1 ){
$ ("# Result" ).html ("Congratulations!" + data. prize_title + "! ");
} Else {
$ ("# Result" pai.html ("Sorry, you failed to win! ");
}
});
});
},
"Json ")
}
3,
Finally, let's take a look at how to set and calculate the winning probability algorithm in ajax. php.
$ Prize_arr = array (
'0' => array ('id' => 1, 'title' => 'iphone5s ', 'V' => 5 ),
'1' => array ('id' => 2, 'title' => 'Contact docker', 'V' => 10 ),
'2' => array ('id' => 3, 'title' => 'speaker device', 'V' => 20 ),
'3' => array ('id' => 4, 'title' => '30gu disk', 'V' => 30 ),
'4' => array ('id' => 5, 'title' => '50 RMB ', 'V' => 10 ),
'5' => array ('id' => 6, 'title' => 'iphone6s', 'V' => 15 ),
'6' => array ('id' => 7, 'title' => 'Thank you. Continue !~ ', 'V' => 10 ),
);

Foreach ($ prize_arr as $ key => $ val ){
$ Arr [$ val ['id'] = $ val ['V'];
}

$ Prize_id = getRand ($ arr); // obtain the prize id based on the probability.
$ Data ['msg '] = ($ prize_id = 7 )? 0: 1; // none if it is 0
$ Data ['prize _ title'] = $ prize_arr [$ prize_id-1] ['title']; // prize winner
Echo json_encode ($ data );
Exit; // return to the front end using a json Array

Function getRand ($ proArr) {// calculate the winning probability
$ Rs = ''; // z winning result
$ ProSum = array_sum ($ proArr); // The total probability accuracy of the probability Array
// Probability array Loop
Foreach ($ proArr as $ key => $ proCur ){
$ RandNum = mt_rand (1, $ proSum );
If ($ randNum <= $ proCur ){
$ Rs = $ key;
Break;
} Else {
$ ProSum-= $ proCur;
}
}
Unset ($ proArr );
Return $ rs;
}
Through ajax. php, we can see that a total of seven awards have been set and the winning probability has been set. For example, the chance of winning "iphone5s" is 5%, and the chance of winning "no" is 10%, click the demo to show your luck.See this special effect demo and free download, visit the http://www.sucaihuo.com/js/17.html

AD: truly free, domain name + VM + enterprise mailbox = 0 RMB