jquery.rotate.js 转盘抽奖示例

使用jquery.rotate.js 插件简单的转盘抽奖示例：

1.引入jQuery和jquery.rotate.js插件

<script src="static/js/jquery.min.js"></script>
<script src="static/js/jquery.rotate.min.js"></script>

2.HTML

<div class="luck-draw"><div class="lottery-bg"><img src=""></div><a id="playbtn" class="btn-play" href="javascript:void(0);" title="开始抽奖"></a>
</div>

3.js

$(function() {var $btn = $('.lottery-bg'); // 旋转的div        var clickfunc = function() {var data = [1, 2, 3, 4, 5, 6]; //抽奖//data为随机出来的结果，根据概率后的结果data = data[Math.floor(Math.random() * data.length)]; //1~6的随机整数switch(data) {case 1:                         rotateFunc(1, 0, '6666元京东购物卡');break;case 2:rotateFunc(2, 0, '0.36元微信红包');break;case 3:rotateFunc(3, 240, '0.56元微信红包');break;case 4:rotateFunc(4, 180, '0.68元微信红包');break;case 5:rotateFunc(5, 120, '爱奇艺视频黄金会员月卡');break;case 6:rotateFunc(6, 60, '华为Watch 2运动手表');break;}}$("#playbtn").click(function() {clickfunc();});var rotateFunc = function(awards, angle, text) {$btn.stopRotate();$btn.rotate({angle: 0, //旋转的角度数  duration: 5000, //旋转时间animateTo: angle + 1440, //给定的角度,让它根据得出来的结果加上1440度旋转    animateTo：从当前角度值动画旋转到给定的角度值 （或给定的角度参数）callback: function() {isture = false; // 标志为 执行完毕}});};});

jquery.rotate.js 转盘抽奖示例相关推荐

jquery rotate.js
CSS3 提供了多种变形效果,比如矩阵变形.位移.缩放.旋转和倾斜等等,让页面更加生动活泼有趣,不再一动不动.然后 IE10 以下版本的浏览器不支持 CSS3 变形,虽然 IE 有私有属性滤镜(fil ...
PHP jQuery微信大转盘抽奖源代码分享
微信大转盘抽奖-jQuery+PHP实现,发现很多转盘抽奖,都实现了前台部分,大部分都使用了HTML5技术,但是后台自己调整抽奖几率不方便,索性自己收集资料,在一个转盘抽奖的基础上,增加了PHP部分代 ...
转盘抽奖hTML CSS jquery,jquery转盘抽奖功能实现
一.用到的素材二.代码如下,重点是js部分 jQuery九宫格大转盘抽奖 #lottery{width:570px;height:510px;margin:0px auto;border:4px s ...
jquery抽奖转盘java_jquery实现九宫格大转盘抽奖
下面我们来分享一个九宫格抽奖特效特效说明: 一款jQuery九宫格大转盘抽奖代码网页特效,点击抽奖按钮开始随机抽奖选择奖品,可设置起点位置.奖品数量.转动次数.中奖位置参数.(兼容测试:IE7及以上 ...
【jQuery】使用jquery.form.js，获取提交表单返回值
jQuery表单库介绍实现 html 中提交表单并实现不跳转页面处理返回值 jQuery表单库(jquery.form.js库)以jQuery为基础,用于处理表单AJAX提交,使得表单AJAX提交简 ...
js框架jquery实现幸运大转盘抽奖程序代码,兼容多种浏览器
原文:js框架jquery实现幸运大转盘抽奖程序代码,兼容多种浏览器源代码下载地址:http://www.zuidaima.com/share/1779633798073344.htm 看到网页上有 ...
js框架jquery实现的幸运大转盘抽奖程序代码,兼容多种浏览器(Internet Explorer 6.0+ 、Firefox 2.0 、Safari 3 、Opera 9 、Chrome)
博客目录 js框架jquery实现的幸运大转盘抽奖程序代码实现功能截图系统功能使用技术代码写在最后 js框架jquery实现的幸运大转盘抽奖程序代码本系统实现了一个幸运转盘抽奖,兼容多种浏 ...
C#保留2位小数几种场景总结游标遍历所有数据库循环执行修改数据库的sql命令原生js轮盘抽奖实例分析（幸运大转盘抽奖） javascript中的typeof和类型判断...
C#保留2位小数几种场景总结场景1: C#保留2位小数,.ToString("f2")确实可以,但是如果这个数字本来就小数点后面三位比如1.253,那么转化之后就会变成1.25. ...
php ajax 概率转盘,php+jquery实现转盘抽奖概率可任意调
转盘抽奖,炫丽的一般是flash做的.不懂flash而又不需要那么炫丽,可以简单的通过jquery来实现.网上教程有很多,跟着做了一下,也贴出来吧.要实现转盘抽奖,有两个关键点,一是让转盘或指针转起来 ...

jquery.rotate.js 转盘抽奖示例

jquery.rotate.js 转盘抽奖示例相关推荐

最新文章

热门文章