使用jQuery Rotare实现微信大转盘抽奖功能


Posted in Javascript onJune 20, 2016

很多公司到了年底都会做一些抽奖活动来刺激、吸引、粘住客户,比如抽奖转盘活动。

前几天用一个jqueryRotate插件实现了转盘的效果。比起那些很炫丽的flash是稍逊点,但也基本实现了需求

效果图:

使用jQuery Rotare实现微信大转盘抽奖功能

实现这个其实蛮简单的,转动的效果用的jqueryRotate插件,所以只要判断每个奖荐对应的角度,然后设置指针的转动角度就可以了。比如关键的是jqueryRotate这个插件的用法。

jqueryRotate的资料:

支持Internet Explorer 6.0+ 、Firefox 2.0 、Safari 3 、Opera 9 、Google Chrome,高级浏览器下使用Transform,低版本ie使用VML实现

google code地址:http://code.google.com/p/jqueryrotate/

调用和方法:

$(el).rotate({  

angle:0, //起始角度


 animateTo:180, //结束的角度


 duration:500, //转动时间


 callback:function(){}, //回调函数


 easing: $.easing.easeInOutExpo //定义运动的效果,需要引用jquery.easing.min.js的文件
  })

$(el).rotate(45); //直接这样子调用的话就是变换角度

$(el).getRotateAngle(); //返回对象当前的角度

$(el).stopRotare(); //停止旋转动画

另外可以更方便的通过调用$(el).rotateRight()和$(el).rotateLeft()来分别向右旋转90度和向左旋转90度。

很简单吧,各种example可以看这里:http://code.google.com/p/jqueryrotate/wiki/Examples

下面是用jqueryRotate实现的抽奖转盘页面:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>转盘</title>
<style>
 *{padding:0;margin:0}
 body{
  text-align:center
 }
 .ly-plate{
  position:relative;
  width:509px;
  height:509px;
  margin: 50px auto;
 }
 .rotate-bg{
  width:509px;
  height:509px;
  background:url(ly-plate.png);
  position:absolute;
  top:0;
  left:0
 }
 .ly-plate div.lottery-star{
  width:214px;
  height:214px;
  position:absolute;
  top:150px;
  left:147px;
  /*text-indent:-999em;
  overflow:hidden;
  background:url(rotate-static.png);
  -webkit-transform:rotate(0deg);*/
  outline:none
 }
 .ly-plate div.lottery-star #lotteryBtn{
  cursor: pointer;
  position: absolute;
  top:0;
  left:0;
  *left:-107px
 }
</style>
</head>
<body>
 <div class="ly-plate">
  <div class="rotate-bg"></div>
  <div class="lottery-star"><img src="rotate-static.png" id="lotteryBtn"></div>
 </div>
</body>
<script src="jquery-1.7.2.min.js"></script>
<script src="jQueryRotate.2.2.js"></script>

<script>
$(function(){
 var timeOut = function(){ //超时函数
  $("#lotteryBtn").rotate({
   angle:0, 
   duration: 10000, 
   animateTo: 2160, //这里是设置请求超时后返回的角度,所以应该还是回到最原始的位置,2160是因为我要让它转6圈,就是360*6得来的
   callback:function(){
    alert('网络超时')
   }
  }); 
 }; 
 var rotateFunc = function(awards,angle,text){ //awards:奖项,angle:奖项对应的角度,text:提示文字
  $('#lotteryBtn').stopRotate();
  $("#lotteryBtn").rotate({
   angle:0, 
   duration: 5000, 
   animateTo: angle+1440, //angle是图片上各奖项对应的角度,1440是我要让指针旋转4圈。所以最后的结束的角度就是这样子^^
   callback:function(){
    alert(text)
   }
  }); 
 };
 
 $("#lotteryBtn").rotate({ 
  bind: 
   { 
   click: function(){
    var time = [0,1];
     time = time[Math.floor(Math.random()*time.length)];
    if(time==0){
     timeOut(); //网络超时
    }
    if(time==1){
     var data = [1,2,3,0]; //返回的数组
      data = data[Math.floor(Math.random()*data.length)];
     if(data==1){
      rotateFunc(1,157,'恭喜您抽中的一等奖')
     }
     if(data==2){
      rotateFunc(2,247,'恭喜您抽中的二等奖')
     }
     if(data==3){
      rotateFunc(3,22,'恭喜您抽中的三等奖')
     }
     if(data==0){
      var angle = [67,112,202,292,337];
       angle = angle[Math.floor(Math.random()*angle.length)]
      rotateFunc(0,angle,'很遗憾,这次您未抽中奖')
     }
    }
   }
   } 
  
 });
 
})
</script>
</html>

这里的time跟data是要从后台获取的,但这里只是静态页面,所以我就利用了random随机数来尽量模拟抽奖的过程了。

time参数表示从后台请求是否成功,0是请求超时,1是请求成功(成功后再判断返回的值是什么样);

data就是请求返回的数据,1,2,3表示一二三等奖,0是不中奖,根据返回的数据,再去设置指针旋转的角度。

因为这个图片上的角度无法用公式计算出来,所以只能这样子计算出来后定死。

如果比较规则的话,应该可以用公式计算。

其实难得不在前台,别人写好的插件,我们拿来用就好,真正难的是在后台,定一个什么样的规则,搞一个什么样的算法,大家去思考去吧~~呵呵~~

以上就是本文的全部内容,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
document.getElementById的简写方式(获取id对象的简略写法)
Sep 10 Javascript
jquery实现当滑动到一定位置时固定效果
Jun 17 Javascript
javascript实现锁定网页、密码解锁效果(类似系统屏幕保护效果)
Aug 15 Javascript
jquery实现九宫格大转盘抽奖
Nov 13 Javascript
js插件dropload上拉下滑加载数据实例解析
Jul 27 Javascript
angularjs实现过滤并替换关键字小功能
Sep 19 Javascript
js html实现计算器功能
Nov 13 Javascript
vue 右键菜单插件 简单、可扩展、样式自定义的右键菜单
Nov 29 Javascript
vue实现页面内容禁止选中功能,仅输入框和文本域可选
Nov 09 Javascript
jQuery中event.target和this的区别详解
Aug 13 jQuery
JS中多层次排序算法的实现代码
Jan 06 Javascript
JavaScript实现点击切换功能
Jan 27 Javascript
JS实现弹出居中的模式窗口示例
Jun 20 #Javascript
jQuery筛选数组之grep、each、inArray、map的用法及遍历json对象
Jun 20 #Javascript
解决jQuery ajax请求在IE6中莫名中断的问题
Jun 20 #Javascript
indexedDB bootstrap angularjs之 MVC DOMO (应用示例)
Jun 20 #Javascript
JS控制层作圆周运动的方法
Jun 20 #Javascript
简单实现jQuery进度条轮播实例代码
Jun 20 #Javascript
移动端H5开发 Turn.js实现很棒的翻书效果
Jun 20 #Javascript
You might like
PHP 开发环境配置(Zend Server安装)
2010/04/28 PHP
ThinkPHP的MVC开发机制实例解析
2014/08/23 PHP
JavaScript 错误处理与调试经验总结
2010/08/10 Javascript
11款新鲜的jQuery插件[附所有demo下载]
2011/01/24 Javascript
jQuery 对Select的操作备忘记录
2011/07/04 Javascript
js自定义事件及事件交互原理概述(一)
2013/02/01 Javascript
js/jquery去掉空格,回车,换行示例代码
2013/11/05 Javascript
Javascript学习笔记之数组的构造函数
2014/11/23 Javascript
apply和call方法定义及apply和call方法的区别
2015/11/15 Javascript
CKEditor无法验证的解决方案(js验证+jQuery Validate验证)
2016/05/09 Javascript
喜大普奔!jQuery发布 3.0 最终版
2016/06/12 Javascript
Vue.js实现拖放效果的实例
2016/09/30 Javascript
浅谈js对象的创建和对6种继承模式的理解和遐想
2016/10/16 Javascript
nodeJS进程管理器pm2的使用
2019/01/09 NodeJs
详解vue 图片上传功能
2019/04/30 Javascript
使用vant的地域控件追加全部选项
2020/11/03 Javascript
Python 时间处理datetime实例
2008/09/06 Python
高性能web服务器框架Tornado简单实现restful接口及开发实例
2014/07/16 Python
python中matplotlib实现最小二乘法拟合的过程详解
2017/07/11 Python
Python生成器以及应用实例解析
2018/02/08 Python
python读取txt文件,去掉空格计算每行长度的方法
2018/12/20 Python
python实现词法分析器
2019/01/31 Python
python适合人工智能的理由和优势
2019/06/28 Python
用60行代码实现Python自动抢微信红包
2021/02/04 Python
python FTP编程基础入门
2021/02/27 Python
联强国际笔试题面试题
2013/07/10 面试题
工程师自我评价怎么写
2013/09/19 职场文书
社区学雷锋活动策划方案
2014/01/30 职场文书
升旗仪式演讲稿
2014/05/08 职场文书
电子商务专业求职信
2014/07/10 职场文书
2014年教师工作总结
2014/11/10 职场文书
辞职信的写法
2015/02/27 职场文书
食堂采购员岗位职责
2015/04/03 职场文书
幼儿园庆六一主持词
2015/06/30 职场文书
婚宴新娘致辞
2015/07/28 职场文书
Pytorch 统计模型参数量的操作 param.numel()
2021/05/13 Python