使用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 相关文章推荐
jquery HotKeys轻松搞定键盘事件代码
Aug 30 Javascript
javascript 关闭IE6、IE7
Jun 01 Javascript
判断文档离浏览器顶部的距离的方法
Jan 08 Javascript
JavaScript网页定位详解
Jan 13 Javascript
影响jQuery使用的14个方面
Sep 01 Javascript
jQuery创建DOM元素实例解析
Jan 19 Javascript
浅谈Sizzle的“编译原理”
Apr 14 Javascript
浅谈JavaScript中运算符的优先级
Jul 07 Javascript
JS表格组件神器bootstrap table详解(强化版)
May 26 Javascript
浅谈javascript运算符——条件,逗号,赋值,()和void运算符
Jul 15 Javascript
Vue数据驱动模拟实现3
Jan 11 Javascript
Layui数据表格之单元格编辑方式
Oct 26 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的类树(支持无限分类)
2006/10/09 PHP
thinkphp模板赋值与替换实例简述
2014/11/24 PHP
Linux安装配置php环境的方法
2016/01/14 PHP
CI(CodeIgniter)框架实现图片上传的方法
2017/03/24 PHP
PHP数组常用函数实例小结
2018/08/20 PHP
解决Laravel 不能创建 migration 的问题
2019/10/09 PHP
JScript中使用ADODB.Stream判断文件编码的代码
2008/06/09 Javascript
28个JS验证函数收集
2010/03/02 Javascript
jqeury eval将字符串转换json的方法
2011/01/20 Javascript
基于JQuery 的消息提示框效果代码
2011/07/31 Javascript
jQuery插件实现无缝滚动特效
2015/11/24 Javascript
纯js代码实现简单计算器
2015/12/02 Javascript
浅谈jquery页面初始化的4种方式
2016/11/27 Javascript
web.js.字符串与正则表达式操作
2017/05/13 Javascript
基于Vue实现后台系统权限控制的示例代码
2017/08/29 Javascript
轻松理解vue的双向数据绑定问题
2017/10/30 Javascript
使用Bootstrap + Vue.js实现表格的动态展示、新增和删除功能
2017/11/27 Javascript
nodejs中实现用户注册路由功能
2019/05/20 NodeJs
基于JS实现计算24点算法代码实例解析
2020/07/23 Javascript
vue接口请求加密实例
2020/08/11 Javascript
react使用antd表单赋值,用于修改弹框的操作
2020/10/29 Javascript
Python使用CMD模块更优雅的运行脚本
2015/05/11 Python
Python3访问并下载网页内容的方法
2015/07/28 Python
八大排序算法的Python实现
2021/01/28 Python
Pandas实现数据类型转换的一些小技巧汇总
2018/05/07 Python
使用 Python 实现文件递归遍历的三种方式
2018/07/18 Python
Python Pywavelet 小波阈值实例
2019/01/09 Python
使用tensorflow框架在Colab上跑通猫狗识别代码
2020/04/26 Python
StubHub哥伦比亚:购买和出售您的门票
2016/10/20 全球购物
伦敦一家领先的精品零售商:IRIS Fashion
2019/05/24 全球购物
网络安全类面试题
2015/08/01 面试题
畜牧兽医本科生个人的自我评价
2013/10/11 职场文书
教师正风肃纪剖析材料
2014/10/20 职场文书
apache基于端口创建虚拟主机的示例
2021/04/24 Servers
解决Mysql多行子查询的使用及空值问题
2022/01/22 MySQL
Redis如何使用乐观锁(CAS)保证数据一致性
2022/03/25 Redis