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 相关文章推荐
正则表达式判断是否存在中文和全角字符和判断包含中文字符串长度
Sep 27 Javascript
动态样式类封装JS代码
Sep 02 Javascript
从零开始学习jQuery (十) jQueryUI常用功能实战
Feb 23 Javascript
jquery实现excel导出的方法
Apr 04 Javascript
js中对象的声明方式以及数组的一些用法示例
Dec 11 Javascript
常用jQuery选择器总结
Jul 11 Javascript
Angularjs按需查询实例代码
Oct 30 Javascript
vue-cli下的vuex的简单Demo图解(实现加1减1操作)
Feb 26 Javascript
Vue 中使用vue2-highcharts实现曲线数据展示的方法
Mar 05 Javascript
vuejs选中当前样式active的实例
Aug 22 Javascript
浅谈webpack devtool里的7种SourceMap模式
Jan 14 Javascript
详解webpack 最简打包结果分析
Feb 20 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生成带有雪花背景的验证码
2006/10/09 PHP
php实现网站插件机制的方法
2009/11/10 PHP
php 静态变量的初始化
2009/11/15 PHP
php验证邮箱和ip地址最简单方法汇总
2015/10/30 PHP
替换php字符串中的单引号为双引号的方法
2017/02/16 PHP
PHP网页安全认证的实例详解
2017/09/28 PHP
javascript 判断数组是否已包含了某个元素的函数
2010/05/30 Javascript
拖动布局之保存布局页面cookies篇
2010/10/29 Javascript
基于JavaScript实现继承机制之构造函数+原型链混合方式的使用详解
2013/05/07 Javascript
jquery实现不同大小浏览器使用不同的css样式表的方法
2014/04/02 Javascript
使用Jquery获取带特殊符号的ID 标签的方法
2014/04/30 Javascript
node.js适合游戏后台开发吗?
2014/09/03 Javascript
浅谈Javascript变量作用域问题
2014/12/16 Javascript
jQuery简单实现提交数据出现loading进度条的方法
2016/03/29 Javascript
angular+bootstrap的双向数据绑定实例
2017/03/03 Javascript
anime.js 实现带有描边动画效果的复选框(推荐)
2017/12/24 Javascript
Vue 中使用vue2-highcharts实现曲线数据展示的方法
2018/03/05 Javascript
vue axios post发送复杂对象问题
2019/06/04 Javascript
[46:55]Ti4 冒泡赛第二轮 LGD vs C9
2014/07/14 DOTA
[46:38]完美世界DOTA2联赛PWL S2 Magma vs PXG 第三场 11.28
2020/12/02 DOTA
在SAE上部署Python的Django框架的一些问题汇总
2015/05/30 Python
简单了解python模块概念
2018/01/11 Python
python使用tornado实现登录和登出
2018/07/28 Python
Python调用百度根据经纬度查询地址的示例代码
2019/07/07 Python
深入了解Django中间件及其方法
2019/07/26 Python
python爬虫 urllib模块反爬虫机制UA详解
2019/08/20 Python
python 实现二维列表转置
2019/12/02 Python
selenium 多窗口切换的实现(windows)
2020/01/18 Python
JAVA及PYTHON质数计算代码对比解析
2020/06/10 Python
CSS3系列教程:背景图片(背景大小和多背景图) 应用说明
2012/12/19 HTML / CSS
弘扬焦裕禄精神走群众路线思想汇报
2014/09/12 职场文书
办公室文员岗位职责
2015/02/04 职场文书
2017年寒假少先队活动总结
2016/04/06 职场文书
分享几个JavaScript运算符的使用技巧
2021/04/24 Javascript
使用numpy nonzero 找出非0元素
2021/05/14 Python
redis sentinel监控高可用集群实现的配置步骤
2022/04/01 Redis