使用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 相关文章推荐
让IE8支持DOM 2(不用框架!)
Dec 31 Javascript
js类式继承的具体实现方法
Dec 31 Javascript
基于JavaScript实现div层跟随滚动条滑动
Jan 12 Javascript
关于webuploader插件使用过程遇到的小问题
Nov 07 Javascript
JS实现获取进今年第几天是周几的方法分析
Jun 27 Javascript
qrcode生成二维码微信长按无法识别问题的解决
Apr 04 Javascript
koa+mongoose实现简单增删改查接口的示例代码
May 13 Javascript
微信小程序下拉加载和上拉刷新两种实现方法详解
Sep 05 Javascript
Vue v-text指令简单使用方法示例
Sep 19 Javascript
Vue v-for循环之@click点击事件获取元素示例
Nov 09 Javascript
webpack中的模式(mode)使用详解
Feb 20 Javascript
Vue登录拦截 登录后继续跳转指定页面的操作
Aug 04 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
php之Smarty模板使用方法示例详解
2014/07/08 PHP
PHP+Mysql+jQuery实现发布微博程序 php篇
2015/10/15 PHP
Laravel接收前端ajax传来的数据的实例代码
2017/07/20 PHP
JS写的数字拼图小游戏代码[学习参考]
2008/10/29 Javascript
在JavaScript中获取请求的URL参数[正则]
2010/12/25 Javascript
关于javaScript注册click事件传递参数的不成功问题
2014/07/18 Javascript
Jquery动态添加输入框的方法
2015/05/29 Javascript
使用DNode实现php和nodejs之间通信的简单实例
2015/07/06 NodeJs
javascript字符串函数汇总
2015/12/06 Javascript
easyui validatebox验证
2016/04/29 Javascript
JS移动端/H5同时选择多张图片上传并使用canvas压缩图片
2017/06/20 Javascript
JS中使用gulp实现压缩文件及浏览器热加载功能
2017/07/12 Javascript
ReactNative Image组件使用详解
2017/08/07 Javascript
JS实现图片手风琴效果
2020/04/17 Javascript
jQuery实现倒计时功能 jQuery实现计时器功能
2017/09/19 jQuery
nodejs更改项目端口号的方法
2018/05/13 NodeJs
JavaScript反射与依赖注入实例详解
2018/05/29 Javascript
js中console在一行内打印字符串和对象的方法
2019/09/10 Javascript
刷新页面后让控制台的js代码继续执行
2019/09/20 Javascript
vue使用require.context实现动态注册路由
2020/12/25 Vue.js
动态实现element ui的el-table某列数据不同样式的示例
2021/01/22 Javascript
python网络爬虫采集联想词示例
2014/02/11 Python
django进阶之cookie和session的使用示例
2018/08/17 Python
python flask web服务实现更换默认端口和IP的方法
2019/07/26 Python
Win 10下Anaconda虚拟环境的教程
2020/05/18 Python
pytorch掉坑记录:model.eval的作用说明
2020/06/23 Python
六种酷炫Python运行进度条效果的实现代码
2020/07/17 Python
如何利用Python写个坦克大战
2020/11/18 Python
Java中各种基本数据类型的默认值都是什么
2016/12/22 面试题
写给女朋友的道歉信
2014/01/08 职场文书
高中生的自我鉴定范文
2014/01/24 职场文书
技能竞赛活动方案
2014/02/21 职场文书
师范大学生求职信
2014/06/13 职场文书
销售内勤岗位职责
2015/02/10 职场文书
2015年七一建党节慰问信
2015/03/23 职场文书