jQuery幸运大转盘

2020-11-27 来源：好土汽车网

导读 jQuery幸运大转盘:<!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

<!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幸运大转盘