jquery实现转盘抽奖功能


Posted in Javascript onJanuary 06, 2017

jquery实现转盘抽奖功能

实现这个其实蛮简单的,转动的效果用的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>

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持三水点靠木!

Javascript 相关文章推荐
jQuery lazyload 的重复加载错误以及修复方法
Nov 19 Javascript
formValidator3.3的ajaxValidator一些异常分析
Jul 12 Javascript
Jquery中显示隐藏的实现代码分析
Jul 26 Javascript
关于jQuery参考实例2.0 用jQuery选择元素
Apr 07 Javascript
使用three.js 画渐变的直线
Jun 05 Javascript
深入理解requestAnimationFrame的动画循环
Sep 20 Javascript
Vue.js使用v-show和v-if的注意事项
Dec 13 Javascript
Node.js数据库操作之查询MySQL数据库(二)
Mar 04 Javascript
Vue声明式渲染详解
May 17 Javascript
页面缩放兼容性处理方法(zoom,Firefox火狐浏览器)
Aug 29 Javascript
解决小程序无法触发SESSION问题
Feb 03 Javascript
vue element 关闭当前tab 跳转到上一路由操作
Jul 22 Javascript
BootStrap3中模态对话框的使用
Jan 06 #Javascript
如何制作幻灯片(代码分享)
Jan 06 #Javascript
微信小程序 支付简单实例及注意事项
Jan 06 #Javascript
微信小程序-拍照或选择图片并上传文件
Jan 06 #Javascript
ajax异步请求详解
Jan 06 #Javascript
微信小程序 限制1M的瘦身技巧与方法详解
Jan 06 #Javascript
微信小程序 二维码canvas绘制实例详解
Jan 06 #Javascript
You might like
一些操作和快捷键的理解和讨论
2020/03/04 星际争霸
使用PHP制作新闻系统的思路
2006/10/09 PHP
用PHP伪造referer突破网盘禁止外连的代码
2008/06/15 PHP
PHP命名空间namespace用法实例分析
2016/09/27 PHP
Laravel中Facade的加载过程与原理详解
2017/09/22 PHP
tp5框架前台无限极导航菜单类实现方法分析
2020/03/29 PHP
基于jquery的direction图片渐变动画效果
2010/05/24 Javascript
鼠标经过tr时,改变tr当前背景颜色
2014/01/13 Javascript
Nodejs全栈框架StrongLoop推荐
2014/11/09 NodeJs
jQuery中slice()方法用法实例
2015/01/07 Javascript
jQuery实现的经典竖向伸缩菜单效果代码
2015/09/24 Javascript
JavaScript+html5 canvas绘制的小人效果
2016/01/27 Javascript
AngularJs ng-route路由详解及实例代码
2016/09/14 Javascript
微信小程序 解决请求服务器手机预览请求不到数据的方法
2017/01/04 Javascript
node.js与C语言 实现遍历文件夹下最大的文件,并输出路径,大小
2017/01/20 Javascript
angular 动态组件类型详解(四种组件类型)
2017/02/22 Javascript
jQuery自定义图片上传插件实例代码
2017/04/04 jQuery
MUI 上拉刷新/下拉加载功能实例代码
2017/04/13 Javascript
jQuery复合事件结合toggle()方法的用法示例
2017/06/10 jQuery
JavaScript订单操作小程序完整版
2017/06/23 Javascript
Vue.js项目中管理每个页面的头部标签的两种方法
2018/06/25 Javascript
微信小程序实现打卡签到页面
2020/09/21 Javascript
python实现可将字符转换成大写的tcp服务器实例
2015/04/29 Python
Python编程实现线性回归和批量梯度下降法代码实例
2018/01/04 Python
Python爬虫小技巧之伪造随机的User-Agent
2018/09/13 Python
python中类的属性和方法介绍
2018/11/27 Python
python实现根据文件格式分类
2019/10/31 Python
Python类继承和多态原理解析
2020/02/05 Python
Python3如何在Windows和Linux上打包
2020/02/25 Python
Python如何生成xml文件
2020/06/04 Python
Python中免验证跳转到内容页的实例代码
2020/10/23 Python
新加坡一家在线男士皮具品牌:Faire Leather Co.
2019/12/01 全球购物
家长写给老师的建议书
2014/03/13 职场文书
学生会主席演讲稿
2014/04/25 职场文书
励志演讲稿范文
2014/04/29 职场文书
歌颂党的演讲稿
2014/09/10 职场文书