jquery.rotate转盘随机抽奖活动程序插件
2015-01-04 13:30:03  By: dwtedx

本例子是编写的一个红色喜庆jquery抽奖网页、整个抽奖过程都有特效、是一款基于jquery.rotate插件实现的转盘抽奖活动、非常不错、喜欢的哥们可以下载去研究一下、下面是Demo运行效果图

jQuery代码

$(function(){ var $rotaryArrow = $(´#rotaryArrow´); var $result = $(´#result´); var $resultTxt = $(´#resultTxt´); var $resultBtn = $(´#result´); $rotaryArrow.click(function(){ var data = [0, 1, 2, 3, 4, 5, 6, 7]; data = data[Math.floor(Math.random()*data.length)]; switch(data){ case 1: rotateFunc(1,87,´恭喜您获得了 <em>1</em> 元代金券´); break; case 2: rotateFunc(2,43,´恭喜您获得了 <em>5</em> 元代金券´); break; case 3: rotateFunc(3,134,´恭喜您获得了 <em>10</em> 元代金券´); break; case 4: rotateFunc(4,177,´很遗憾，这次您未抽中奖，继续加油吧´); break; case 5: rotateFunc(5,223,´恭喜您获得了 <em>20</em> 元代金券´); break; case 6: rotateFunc(6,268,´恭喜您获得了 <em>50</em> 元代金券´); break; case 7: rotateFunc(7,316,´恭喜您获得了 <em>30</em> 元代金券´); break; default: rotateFunc(0,0,´很遗憾，这次您未抽中奖，继续加油吧´); } }); //awards:奖项，angle:奖项对应的角度 //angle是图片上各奖项对应的角度，1440是让指针固定旋转4圈 var rotateFunc = function(awards,angle,text){ $rotaryArrow.stopRotate(); $rotaryArrow.rotate({ angle: 0, duration: 5000, animateTo: angle 1440, callback: function(){ $resultTxt.html(text); $result.show(); } }); }; $resultBtn.click(function(){ $result.hide(); }); });

HTML代码

<div> <div></div> <div> <h3>中奖名单</h3> <ul> <li>1852****401</li> <li>1569****851</li> <li>1515****206</li> <li>1550****789</li> <li>1370****627</li> <li>1828****215</li> <li>1589****572</li> <li>1583****825</li> <li>1396****805</li> <li>1332****261</li> <li>1884****863</li> <li>1384****955</li> <li>1897****137</li> <li>1342****973</li> <li>1558****071</li> <li>1554****168</li> <li>1562****018</li> <li>1805****856</li> <li>1354****809</li> <li>1383****364</li> </ul> </div> <div> <p></p> <a href="javascript:" title="关闭"> 关闭</a> </div> </div>

以上就是实现抽奖的代码、当然你必须引入jQuery和jquery.rotate.min.js、两个库都放到源代码里面了

源代码下载链接: ?bdkey=s/1mgxFxGW 密码: a5e9

若资源对你有帮助、浏览后有很大收获、不妨、你的鼓励是维持我不断写博客最大动力

想获取DD博客最新代码、你可以、关注DD博客微信公众号（ddblogs）

或者你也可以关注我的新浪微博、了解DD博客的最新动态：DD博客官方微博（dwtedx的微博）

如对资源有任何疑问或觉得仍然有很大的改善空间、可以对该博文进行评论、希望不吝赐教

为保证及时回复、可以使用博客留言板给我留言: DD博客留言板（dwtedx的留言板）

感谢你的访问、祝你生活愉快、工作顺心、欢迎常来逛逛

猜你喜欢的

如何激活office2013_Office2013激活工具_Office2013永久激活  2014-11-03 21:26:51  ( 32115 )

免费短信的时代来子_中国移动免费发短信  2014-11-05 08:49:16  ( 1823 )

Google AdSense广告联盟收不到PIN码_快速表单身份验证PIN码方法  2014-11-05 13:36:31  ( 4260 )

中国11大光棍儿职业排行榜_你的职业会光棍儿吗  2014-11-06 09:52:14  ( 1664 )

色彩搭配原理与技巧_如何用色彩来吸引用户  2014-11-07 20:26:27  ( 1813 )

Android Intent传递类对象_安卓Activity之间数据传递  2014-08-19 12:38:56  ( 7929 )

 2014-08-20 09:50:11  ( 3815 )

 2014-08-20 16:59:44  ( 4777 )

kindeditor去掉图片空间_怎么去掉kindeditor管理和图片空间的功能  2014-08-21 15:22:44  ( 9218 )

 2014-08-23 11:04:30  ( 1662 )

MVC ajax异步保存数据_JQuery Json翻页_异步图片上传demo  2014-08-24 10:46:53  ( 1802 )

快速评论

技术评论

该技术还没有评论、赶快抢沙发吧...

热搜博文

A标签链接是选择新窗口打开还是当前窗口打开? ( 613 )

国内创业公司该从什么时候开始做数据运营？ ( 274 )

提高网站广告点击率_如何优化广告提高点击率 ( 1565 )

Web前端设计师应该避免的6个关键错误 ( 330 )

要想成功该转换seo相关因素思维了_站长们还在发帖吗？ ( 1412 )

如何快速正确的提高网站的百度关键词排名 ( 1244 )

微信公众号如何推广_微信推广技巧的12种方法 ( 1545 )

绝对赤裸裸的金钱打赏、如果你有微信、并且绑定了微信钱包、请打开微信、使用“扫一扫”付款

收款微信号 dwtedx

绝对赤裸裸的金钱打赏、如果你有手机支付宝、请打开支付宝APP、使用“扫一扫”付款

支付宝帐户 dwtedx@qq.com

绝对赤裸裸的比特币打赏、如果你的手机有比特币客户端、请打开比特币客户端、使用“扫一扫”交易

比特币帐户 dwtedx@qq.com