使用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 相关文章推荐
防止页面被iframe(兼容IE,Firefox火狐)
Jul 04 Javascript
javascript中Date对象应用之简易日历实现
Jul 12 Javascript
js实现前端分页页码管理
Jan 06 Javascript
jQuery插件zTree实现获取一级节点数据的方法
Mar 08 Javascript
Vue.js对象转换实例
Jun 07 Javascript
ReactNative页面跳转Navigator实现的示例代码
Aug 02 Javascript
详解vue-cli本地环境API代理设置和解决跨域
Sep 05 Javascript
使用vue根据状态添加列表数据和删除列表数据的实例
Sep 29 Javascript
javascript中的event loop事件循环详解
Dec 14 Javascript
24个解决实际问题的ES6代码片段(小结)
Feb 02 Javascript
JavaScript 接口原理与用法实例详解
May 12 Javascript
微信小程序 接入腾讯地图的两种写法
Jan 12 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
非常好用的JsonToString 方法 简单实例
2013/07/18 Javascript
jquery取消选择select下拉框示例代码
2014/02/22 Javascript
jQuery操作动态生成的内容的方法
2016/05/28 Javascript
JS 根据子网掩码,网关计算出所有IP地址范围示例
2020/04/23 Javascript
省市区三级联动jquery实现代码
2020/04/15 Javascript
Javascript网页抢红包外挂实现分享
2018/01/11 Javascript
详解Jest结合Vue-test-utils使用的初步实践
2019/06/27 Javascript
javascript中的闭包概念与用法实践分析
2019/07/26 Javascript
react实现antd线上主题动态切换功能
2019/08/12 Javascript
layui-tree实现Ajax异步请求后动态添加节点的方法
2019/09/23 Javascript
[08:56]DOTA2-DPC中国联赛2月23日Recap集锦
2021/03/11 DOTA
python通过索引遍历列表的方法
2015/05/04 Python
将Django框架和遗留的Web应用集成的方法
2015/07/24 Python
Python判断某个用户对某个文件的权限
2016/10/13 Python
Python爬虫中urllib库的进阶学习
2018/01/05 Python
Python 给屏幕打印信息加上颜色的实现方法
2019/04/24 Python
Python numpy数组转置与轴变换
2019/11/15 Python
python使用正则表达式去除中文文本多余空格,保留英文之间空格方法详解
2020/02/11 Python
完美解决pycharm 不显示代码提示问题
2020/06/02 Python
Opencv python 图片生成视频的方法示例
2020/11/18 Python
BeautifulSoup中find和find_all的使用详解
2020/12/07 Python
CSS3的新特性介绍
2008/10/31 HTML / CSS
HTML5 canvas画图并保存成图片的jcanvas插件
2014/01/17 HTML / CSS
美国最大婚纱连锁店运营商:David’s Bridal
2019/03/12 全球购物
后勤人员自我评价怎么写
2013/09/19 职场文书
学生会主席就职演讲稿
2014/01/14 职场文书
2014两会学习心得:榜样精神伴我行
2014/03/17 职场文书
综治工作心得体会
2014/09/11 职场文书
2015年采购工作总结
2015/04/10 职场文书
读书笔记怎么写
2015/07/01 职场文书
大学同学聚会感言
2015/07/30 职场文书
3招让你摆脱即兴讲话冷场尴尬
2019/08/08 职场文书
遇事可以测出您的见识与格局
2019/09/16 职场文书
iPhone13 Pro外观确定,升级4800万镜头,4月20日发新品
2021/04/15 数码科技
微信小程序实现录音Record功能
2021/05/09 Javascript
索尼ICF-36收音机评测
2022/04/30 无线电