Online find jquery roll dice effect, test compatible IE7 and above browser, IE6 no test
The JS code is as follows:
1 $ (function () {2 var dice = $ ("#dice");3 Dice.click (function () {4$ (". Wrap"). Append ("<DivID= ' Dice_mask '></Div>");//Add a mask5 dice.attr ("Class", "dice");//Clear the number of points after the last animation6 dice.css (' cursor ', ' Default ');7 var num = Math.floor (math.random () *6+1);//Generate random number 1-68 Dice.animate ({left: ' +2px '}, 100,function () {9 Dice.addclass ("dice_t");Ten }). (). Animate ({top: ' -2px '},100,function () { One Dice.removeclass ("dice_t"). AddClass ("dice_s"); A }). Animate ({opacity: ' Show '},600,function () { - Dice.removeclass ("dice_s"). AddClass ("Dice_e"); - }). Animate ({left: ' -2px ', Top: ' 2px '},100,function () { the Dice.removeclass ("Dice_e"). AddClass ("Dice_" +num); -$ ("#result"). HTML ("You're throwing points<span>"+num+"</span>"); - dice.css (' cursor ', ' pointer '); - $ ("#dice_mask"). Remove ();//Remove Mask + }); - }); +});
Online Demo: Demo
jquery Roll Dice