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

This article mainly introduces how to use jQuery and PHP to achieve a WEB golden egg program, the article is very detailed, has a certain reference value, interested friends must read it!

Prepare for

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 for smashing 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}, 30 mincing function () {_ this.addClass ("curr"); / / shredding effect _ this.find ("sup") .show () / / Golden flowers splash $(".flowers"). Hide (); / / Hidden Hammer $('.resultTip'). Css ({display:'block',top:'100px',left:_this.position (). Left+45,opacity:0}) .animate ({top: '50pxgift training opacity1}, 300 res.msg==1 function () {/ / winning result animation if (res.msg==1) {/ / returns the result $("# result") .animate ("Congratulations, you won" + res.prize+ "!") } else {$("# result") .html ("I'm sorry you didn't win the lottery!");}

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.

$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); / / wins the prize id $res ['msg'] = ($rid==6)? 0V1 based on probability; / / if 0 misses $res [' prize'] = $prize_arr [$rid-1] ['prize']; / / wins echo json_encode ($res) / / calculate probability function getRand ($proArr) {$result =''; / / Total probability precision of probability array $proSum = array_sum ($proArr); / / 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.