Throwing ghost game animation effects implemented by jQuery

Everyone must have played the ghost throwing game. Today I want to share with you how to use jQuery to achieve the animation effect of the ghost throwing () animation effects of Custom Animation functions and CSS background image Switching

Implementation principle: When the animation rolls out, the animation displacement is changed through the animate () function of jQuery, the delay effect is added in the middle, and the animation background is changed. The animation stops when the animation runs to a random number of points, and displays the number of dropped points. In fact, the animation process adds multiple frames of different images (the same as the frames in flash animated films). The more frames, the better the effect. Then, after frame-by-frame operation, the animation effect is formed. Used as the background image. This is required to load the jQuery library. Copy the Code as follows: <script type = "text/javascript" src = "js/jquery. js "> </script> then add the following code to the body of the HTML page. # dice is used to place the cursor, and # result is used to display the prompt information. Copy the Code as follows: <div id = "dice" class = "dice dice_1"> </div> <p id = "result"> Click Upload! </P> the binary csscode uses BACKGROUNDTo load image dice.png to. dice. Then we use several styles to locate different vertex numbers and transitions with different background-position values. I have implemented simple fuzzy processing for the transition film. You can also use css3 to process the blur effect of the image. Note # dice_mask is used to prevent repeated clicks, which will be mentioned later. The Code is 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-pixel PX }. 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} III. jQuery code when you click the color, you must first set the watermark style (clear the style after the last animation ), use the transparent # dice_mask to cover the secondary click protection and generate a 1-6 Then, use the animate () function to change the watermark displacement, change the watermark class to make a transitional fuzzy background image appear, then perform a slight delay (), and then enter the next frame animation, at the end of the animation, the class style of the timer is located on dice_x, and x indicates the number of points, that is, the number of points after the scroll is obtained, the mask effect is removed, and you can continue to click throw. The Code is as follows: $ (function () {var dice =$ ("# dice"); dice. click (function () {dice. attr ("class", "dice"); // clear the number of points after the last animation dice.css ("cursor", "default"); $ (". wrap "). append ("<div id = 'dice _ mask'> </div>"); // adds the mask var num = Math. floor (Math. random () * 6 + 1); // generates a random number of 1-6 dice. animate ({left: '+ 2px'}, 100, function () {dice. addClass ("dice_t ");}). delay( 200 ). animate ({top: '-2px'}, 100, function () {dice. removeClass ("dice_t "). addClass ("dic E_s ");}). delay( 200 ). animate ({opacity: 'show'}, 600, function () {dice. removeClass ("dice_s "). addClass ("dice_e ");}). delay( 100 ). animate ({left: '-2px', top: '2px '}, 100, function () {dice. removeClass ("dice_e "). addClass ("dice _" + num); $ ("# result" Pie .html ("the number of points you throw is <span>" + num + "</span> "); dice.css ('cursor ', 'pointer'); $ ("# dice_mask "). remove (); // remove mask}); jQuery provides one (), live (), bind (), on () and so on. In this example, it does not work, so I thought of a way to hide the animation with a transparent mask layer of the same size as the animation when the animation starts, in this way, you cannot repeatedly click "Animation" during the animation operation. After the animation is completed, the mask layer is removed so that the animation can be clicked again. The animation effect of the above throw is to simulate the Frame Animation of flash and play the frame-by-frame operation through the timeline. jQuery can be used instead of flash to complete this animation effect, although the effect is not as dazzling as flash. The animation effect of this article is to pave the way for the next article. In the next article, I will introduce you to comprehensive technical articles and instance code that combine jQuery, HTML, CSS, PHP, and MySQL, this article explains how to throw a lucky draw game to control the probability of throwing a bonus point. It is also a ghost game.