这是一款简单的jQuery掷骰子随机获得点数动画特效,只要点击骰子就可以一次次掷出随机点数。
js代码
<script type=\"text/javascript\" src=\"js/jquery.min.js\"></script> <script type=\"text/javascript\"> $(function(){ var dice = $(\"#dice\"); dice.click(function(){ $(\".wrap\").append(\"<div id=\'dice_mask\'></div>\");//加遮罩 dice.attr(\"class\",\"dice\");//清除上次动画后的点数 dice.css(\'cursor\',\'default\'); var num = Math.floor(Math.random()*6+1);//产生随机数1-6 dice.animate({left: \'+2px\'}, 100,function(){ dice.addClass(\"dice_t\"); }).delay(200).animate({top:\'-2px\'},100,function(){ dice.removeClass(\"dice_t\").addClass(\"dice_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\").html(\"您掷得点数是<span>\"+num+\"</span>\"); dice.css(\'cursor\',\'pointer\'); $(\"#dice_mask\").remove();//移除遮罩 }); }); }); </script>
暂无评论内容