Implementation principle: After the color sub is thrown, the color sub displacement is changed through the jQuery's animate() function, the delay effect is added in the middle, and the color sub background is changed. Finally, the animation stops when it runs to the randomly generated points, and the number of points thrown is displayed. In fact, the animation process adds frames of multiple different pictures (same frames in flash animation videos). The more frames the better the effect, and then after running frame by frame, the animation effect is formed.
1. Preparation
We need to prepare the color sub-material. In this example, I use the color sub-material obtained from the network. What we want to do is to place 6 color sub-pictures (1-6 points) and the intermediate transition effect picture (motion blurring) on the same picture, save as, and use it as the color sub-background picture.
Loading the jQuery library is a must.
Copy the codeThe code is as follows:
<script type="text/javascript" src="js/"></script>
Then add the following code to the body of the HTML page, where #dice is used to place chromons, and #result is used to display prompt information.
Copy the codeThe code is as follows:
<div class="dice dice_1"></div>
<p >Please click on the color comb above! </p>
<p >Please click on the color comb above! </p>
2. CSS code
We use background to load the image into .dice. Then we used several styles to locate different color sub-point numbers and transition renderings through different background-position values. I have done a simple blurring of the transition effect picture, and everyone can also use css3 to process the blurring effect of the picture. Note that #dice_mask is used to prevent repeated clicks, as will be mentioned later.
Copy the codeThe code is as follows:
.wrap{width:90px; height:90px; margin:120px auto 30px auto; position:relative}
.dice{width:90px; height:90px; background:url() 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}
.dice{width:90px; height:90px; background:url() 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}
3. jQuery code
When clicking a color sub, first preset the style of the color sub (clear the style after the last animation), cover the color sub with transparent #dice_mask to prevent repeated clicks, and generate a random number of 1-6. Then, through the animate() function, change the color sub displacement, change the color sub class to make the transition blurred background image appear, then delay() a little, and then enter the next frame animation. At the end of the animation, the color sub class style is positioned on dice_x, and x represents the number of points, which means that the number of points after the color sub is thrown, remove the mask effect, and you can continue to click the color sub.
Copy the codeThe code is as follows:
$(function(){
var dice = $("#dice");
(function(){
("class","dice");//Clear the points after the last animation
("cursor","default");
$(".wrap").append("<div id='dice_mask'></div>");//Add mask
var num = (()*6+1);//Create random numbers 1-6
({left: '+2px'}, 100,function(){
("dice_t");
}).delay(200).animate({top:'-2px'},100,function(){
("dice_t").addClass("dice_s");
}).delay(200).animate({opacity: 'show'},600,function(){
("dice_s").addClass("dice_e");
}).delay(100).animate({left:'-2px',top:'2px'},100,function(){
("dice_e").addClass("dice_"+num);
$("#result").html("You throw the points <span>"+num+"</span>");
('cursor','pointer');
$("#dice_mask").remove();//Remove the mask
});
});
});
var dice = $("#dice");
(function(){
("class","dice");//Clear the points after the last animation
("cursor","default");
$(".wrap").append("<div id='dice_mask'></div>");//Add mask
var num = (()*6+1);//Create random numbers 1-6
({left: '+2px'}, 100,function(){
("dice_t");
}).delay(200).animate({top:'-2px'},100,function(){
("dice_t").addClass("dice_s");
}).delay(200).animate({opacity: 'show'},600,function(){
("dice_s").addClass("dice_e");
}).delay(100).animate({left:'-2px',top:'2px'},100,function(){
("dice_e").addClass("dice_"+num);
$("#result").html("You throw the points <span>"+num+"</span>");
('cursor','pointer');
$("#dice_mask").remove();//Remove the mask
});
});
});
There are many ways to prevent repeated clicks. jQuery provides functions such as one(), live(), bind(), on(), etc., which do not work in this example, so I thought of a way. When clicking on the color sub, start the animation, use a transparent mask layer with the same size as the color sub to block the color sub, so that the color sub can not be clicked repeatedly continuously during the animation run. When the animation runs, remove the mask layer so that the color sub can be clicked again.
The above color throw animation effect simulates flash frame animation, and plays out frames through the timeline. Using jQuery can replace flash to complete such animation effects, although the effect is not as dazzling as flash. The color-throwing animation effect of this article is to pave the way for the next article. In the next article, I will introduce to you a comprehensive technical article and example code combining jQuery, HTML, CSS, PHP, and MySQL to explain the color-throwing lottery game, which can control the probability of throwing the number of excellent sub-points, and is also an interesting game.