jQuery幸运大转盘_jQuery+PHP抽奖程序的简单实现
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了jQuery幸运大转盘_jQuery+PHP抽奖程序的简单实现相关的知识，希望对你有一定的参考价值。
jQuery幸运大转盘_jQuery+php抽奖程序的简单实现
在线实例
完整代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>jQuery幸运大转盘_jQuery+PHP抽奖程序(上)</title> <style type="text/css"> .demo{ position:relative;width:417px;} #disk{width:417px; height:417px; background:url(/api/jq/5733e347040d9/images/disk.jpg) no-repeat;} #start{width:163px; height:320px; position:absolute; top:46px; left:130px;} #start img{cursor:pointer} </style> </head> <body> <div class="container"> <div class="demo"> <div id="disk"></div> <div id="start"><img src="/api/jq/5733e347040d9/images/start.png" id="startbtn" alt="转盘开启"/></div> </div> </div> <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/1.7.2/jquery.min.js"></script> <script type="text/javascript" src="/api/jq/5733e347040d9/jQueryRotate.2.2.js"></script> <script type="text/javascript" src="/api/jq/5733e347040d9/jquery.easing.min.js"></script> <script type="text/javascript"> $(function() { $("#startbtn").rotate({ bind: { click: function() { var random = Math.floor(Math.random() * 360); //生成随机数 $(this).rotate({ duration: 3000, //转动时间间隔（速度单位ms） angle: 0, //指针开始角度 animateTo: 3600 + random, //转动角度，当转动角度到达3600+random度时停止转动。 easing: $.easing.easeOutSine, //easing动画效果 callback: function() { //回调函数 alert(‘恭喜您，中奖了！‘); } }); } } }); }); </script> </body> </html>
以上是关于jQuery幸运大转盘_jQuery+PHP抽奖程序的简单实现的主要内容，如果未能解决你的问题，请参考以下文章