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 相关文章推荐
dropdownlist之间的互相联动实现(显示与隐藏)
Nov 24 Javascript
js setattribute批量设置css样式
Nov 26 Javascript
jquery 图片Silhouette Fadeins渐显效果
Feb 07 Javascript
JQuery获取浏览器窗口内容部分高度的代码
Feb 24 Javascript
js实现鼠标拖动图片并兼容IE/FF火狐/谷歌等主流浏览器
Jun 06 Javascript
使用javascript实现ListBox左右全选,单选,多选,全请
Nov 07 Javascript
JavaScript实现MIPS乘法模拟的方法
Apr 17 Javascript
jQuery EasyUI中的日期控件DateBox修改方法
Nov 09 Javascript
浅谈js的解析顺序 作用域 严格模式
Oct 23 Javascript
深入理解ES6之数据解构的用法
Jan 13 Javascript
javascript深拷贝、浅拷贝和循环引用深入理解
May 27 Javascript
Vue实现移动端页面切换效果【推荐】
Nov 13 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
php 解决旧系统 查出所有数据分页的类
2012/08/27 PHP
php文件缓存方法总结
2016/03/16 PHP
利用php的ob缓存机制实现页面静态化方法
2017/07/09 PHP
浅谈PHP中的Trait使用方法
2019/03/22 PHP
JS 遮照层实现代码
2010/03/31 Javascript
JavaScript中为元素加上name属性的方法
2011/05/09 Javascript
深入理解JavaScript系列(38):设计模式之职责链模式详解
2015/03/04 Javascript
深入浅析JavaScript中的constructor
2016/04/19 Javascript
DOM事件探秘篇
2017/02/15 Javascript
jQuery DOM节点的遍历方法小结
2017/08/15 jQuery
angular2路由之routerLinkActive指令【推荐】
2018/05/30 Javascript
基于Vue实现微信小程序的图文编辑器
2018/07/25 Javascript
js中获取URL参数的共用方法getRequest()方法实例详解
2018/10/24 Javascript
vue - vue.config.js中devServer配置方式
2019/10/30 Javascript
React学习之受控组件与数据共享实例分析
2020/01/06 Javascript
vue render函数动态加载img的src路径操作
2020/10/26 Javascript
Python3.x中自定义比较函数
2015/04/24 Python
python实时监控cpu小工具
2018/06/21 Python
Python读取excel指定列生成指定sql脚本的方法
2018/11/28 Python
python numpy 常用随机数的产生方法的实现
2019/08/21 Python
python xlwt如何设置单元格的自定义背景颜色
2019/09/03 Python
Python使用Tkinter实现转盘抽奖器的步骤详解
2020/01/06 Python
手把手教你进行Python虚拟环境配置教程
2020/02/03 Python
Python双链表原理与实现方法详解
2020/02/22 Python
python基于爬虫+django,打造个性化API接口
2021/01/21 Python
美体小铺英国官网:The Body Shop英国
2017/01/24 全球购物
美国Curacao百货连锁店网站:iCuracao.com
2019/07/20 全球购物
Aosom西班牙:家具在线商店
2020/06/11 全球购物
中国电子产品批发商/跨境电商/外贸网:Sunsky-online
2020/04/20 全球购物
人事助理岗位职责
2013/11/18 职场文书
党员个人对照检查材料思想汇报
2014/09/16 职场文书
机关职员工作检讨书
2014/10/23 职场文书
投标单位介绍信
2015/05/05 职场文书
联欢会开场白
2015/06/01 职场文书
安全知识竞赛主持词
2015/06/30 职场文书
国庆节新闻稿
2015/07/17 职场文书