Implementation principle: When the dice roll, through the animate () function of jquery to change the boson displacement, the middle added the delay effect, and transform the dice background, the final animation to run to the number of randomly generated points to stop, and show the number of points thrown. In fact, the animation process to add a number of different pictures of the frame (with the Flash animation film frame), the more frames the better the effect, and then the frame after the formation of the animation effect.
First, preparatory work
We need to prepare the dice material, in this example, I take the boson footage from the network, and we're going to deal with the 6 dice pictures (1-6 dots) and the middle transition effect picture (do motion blur) on the same picture, Save as Dice.png, as a boson background.
Load into the jquery library, which is a must.
Copy Code code as follows:
<script type= "Text/javascript" src= "Js/jquery.js" ></script>
Then add the following code to the body of the HTML page, where #dice is used to place the dice, #result是用来显示提示信息的.
Copy Code code as follows:
<div id= "Dice" class= "Dice dice_1" ></div>
<p id= "Result" > Please click on the dice directly above! </p>
Second, CSS code
We use background to load the picture dice.png into the. Dice. Then we used several styles to locate different dice points and transition effects through different background-position values. One of the transition effects of the picture I did a simple fuzzy processing, you can also use CSS3 to deal with the blur effect of the picture. Note that #dice_mask is used to do anti-repeated clicks, which will be mentioned later.
Copy Code code as follows:
. wrap{width:90px height:90px; margin:120px auto 30px auto; position:relative}
. dice{width:90px height:90px Background:url (dice.png) no-repeat;
. dice_1{background-position:-5px-4px}
. dice_2{background-position:-5px-107px}
. dice_3{background-position:-5px-212px}
. dice_4{background-position:-5px-317px}
. dice_5{background-position:-5px-427px}
. dice_6{background-position:-5px-535px}
. dice_t{background-position:-5px-651px}
. dice_s{background-position:-5px-763px}
. dice_e{background-position:-5px-876px}
P#result{text-align:center; font-size:16px}
P#result span{font-weight:bold; color: #f30; margin:6px}
#dice_mask {width:90px; height:90px; background: #fff; opacity:0; position:absolute;
top:0; left:0; z-index:999}
Three, jquery code
When you click on the dice, first preset the dice style (clear the last animation style), the dice with transparent #dice_mask cover anti-repeated clicks, and produce a random number of 1-6, and then through the animate () function, change the boson displacement, Changing the dice class causes the transition blur background image to appear, then a little delay delay (), and then into the next frame animation, the end of the animation, the Dice class style positioning to the dice_x, X for points, that is, after throwing the number of outstanding children, remove the mask effect, You can also continue clicking on the dice.
Copy Code code as follows:
$ (function () {
var dice = $ ("#dice");
Dice.click (function () {
Dice.attr ("Class", "dice");//Clear the number of points after last animation
DICE.CSS ("cursor", "Default");
$ (". Wrap"). Append ("<div id= ' Dice_mask ' ></div>");/+ Mask
var num = Math.floor (math.random () *6+1);//Generate random number 1-6
Dice.animate ({left: ' +2px '}, 100,function () {
Dice.addclass ("dice_t");
}). Delay. Animate ({top: ' -2px '},100,function () {
Dice.removeclass ("dice_t"). AddClass ("dice_s");
} delay. Animate ({opacity: ' Show '},600,function () {
Dice.removeclass ("dice_s"). AddClass ("Dice_e");
}). Delay. Animate ({left: ' -2px ', Top: ' 2px '},100,function () {
Dice.removeclass ("Dice_e"). AddClass ("Dice_" +num);
$ ("#result"). HTML ("You are throwing points is <span>" +num+ "</span>");
DICE.CSS (' cursor ', ' pointer ');
$ ("#dice_mask"). Remove ()//Mask removal
});
});
});
There are a lot of ways to prevent repeated clicks, jquery provides one (), Live (), bind (), on (), etc. these functions do not work in that instance, so I figured out a way to hide the dice with a transparent mask layer that is the same size as the dice when you click on the dice. So that in the animation operation can not be repeated click Dice, when the animation is completed, and then remove the mask layer, so that the dice will be clicked again.
Above the animation effect of the dice is to simulate the flash frame animation, through the timeline to play a frame run, and the use of jquery can replace Flash to complete such animation effect, although the effect is not flash dazzle. This article of the dice animation effect is to pave the next article, the next article I will introduce a combination of jquery, HTML, CSS, PHP, MySQL comprehensive technical articles and instance code, to explain the dice lottery game, you can control the probability of throwing excellent sub points, but also a fun game.
