首页 / JQUERY / jQuery幸运大转盘
jQuery幸运大转盘
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了jQuery幸运大转盘,小编现在分享给大家,供广大互联网技能从业者学习和参考。文章包含1481字,纯文字阅读大概需要3分钟。
内容图文
![jQuery幸运大转盘](/upload/InfoBanner/zyjiaocheng/305/496a356e400a489eb0efe0312dda9d44.jpg)
<!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幸运大转盘所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错,欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 gblab@vip.qq.com 举报,一经查实,本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。
来源:【匿名】