jquery Dice Animation

The principle of implementation: when the dice are thrown, the animate () function of jquery changes the dice displacement, adds the delay effect in the middle, and transforms the dice background, the final animation runs to the randomly generated points stop, and shows the number of points thrown. In fact, the animation process to add a number of different pictures of the frame (with the Flash animation movie frame), the more the number of frames, the better the effect, and then the frame after the animation effect is formed. Ready we need to prepare dice footage, in this example, I take the dice footage obtained from the network, we have to do is to deal with the 6 dice picture (1-6 points), and the middle transition effect of the picture (do motion blur) on the same picture, Save as Dice.png, as a dice background map. It is necessary to load the jquery library.  <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是用来显示提示信息的.  <div id= "Dice"  class= "dice dice_1" ></div> <p id= "Result" > Please click on the dice above directly! </p> css we use background to load the picture dice.png into the. Dice. We then used several styles to locate different dice point plots and transitions using different background-position values. One of the transition films I did a simple blur, you can also use CSS3 to deal with the blur effect of the picture. Note that #dice_mask is used to do anti-repetition clicks, which will be mentioned later.  .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}&NBSP;.DICE_3{BACKGROUND-POSITION:-5PX&NBSP;-212PX}&NBSP;.DICE_4{BACKGROUND-POSITION:-5PX&NBSP;-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 } jquery When you click the dice, preset the dice's style (empty the last animated style), the dice with a transparent #dice_mask mask anti-repetition click, and produce a 1-6 random number, and then through the animate () function, change the dice displacement, Change the dice of the class so that the transition blurred background image, and then a little delayed delay (), and then into the next frame animation, the end of the animation, the dice of the class style positioning to Dice_x, X represents the number of points, that is, the number of points after throwing a good son, remove the mask effect, You can also continue clicking on the dice.  $ (function () {     var dice = $ ("#dice");      dice.click (functiOn () {         dice.attr ("Class", "dice");//Clear the number of points after the last animation    &NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;DICE.CSS ("cursor", "default");          $ (". Wrap"). Append ("<div id= ' Dice_mask ' ></div>");//Add 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 (in. animate) ({opacity:  ' Show '},600, function () {    &Nbsp;        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 throw points is <span> "+num+" </span> ");           &NBSP;&NBSP;&NBSP;DICE.CSS (' cursor ', ' pointer ');              $ ("#dice_mask"). Remove ();//Remove Mask          });      });  });  There are many ways to prevent repeated clicks, and jquery provides one (), Live (), bind (), on () and so on, and so on, that doesn't work in this instance. , so I thought of a way, when the click on the dice after the animation, with a dice size of the same transparent mask layer to cover the dice, so that in the animation run can not repeatedly click the dice, when the animation is completed, then the mask layer removed, so that the dice can be re-clicked. The animation effect of the above dice is to simulate the flash frame animation, through the time axis to play frame by operation, and the use of JquEry can be used instead of flash to complete the animation effect, although the effect of Flash is not dazzling 

jquery Dice Animation