jquery转盘抽奖功能实现


Posted in Javascript onNovember 13, 2015

 一、用到的素材

jquery转盘抽奖功能实现jquery转盘抽奖功能实现jquery转盘抽奖功能实现jquery转盘抽奖功能实现jquery转盘抽奖功能实现jquery转盘抽奖功能实现jquery转盘抽奖功能实现

二、代码如下,重点是js部分

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery九宫格大转盘抽奖</title>
<style>
#lottery{width:570px;height:510px;margin:0px auto;border:4px solid #ba1809;}
#lottery table{background-color:yellow;}
#lottery table td{position:relative;width:190px;height:170px;text-align:center;color:#333;font-index:-999}
#lottery table td img{display:block;width:190px;height:170px;}
#lottery table td a{width:190px;height:170px;display:block;text-decoration:none;background:url(images/lottery1.jpg) no-repeat top center;}
#lottery table td a:hover{background-image:url(images/lottery2.jpg);}
#lottery table td.active .mask{display:block;}
.mask{
 width:100%;
 height:100%;
 position:absolute;
 left:0;
 top:0;
 background:url(images/mask.png) no-repeat;
 display:none;
}
</style>
</head>
<body class="keBody">
<!--效果html开始-->
<div id="lottery">
 <table border="0" cellpadding="0" cellspacing="0">
  <tr>
   <td class="lottery-unit lottery-unit-0"><img src="images/gift0.jpg"><div class="mask"></div></td>
   <td class="lottery-unit lottery-unit-1"><img src="images/gift1.jpg"><div class="mask"></div></td>
   <td class="lottery-unit lottery-unit-2"><img src="images/gift2.jpg"><div class="mask"></div></td>
  </tr>
  <tr>
   <td class="lottery-unit lottery-unit-7"><img src="images/gift7.jpg"><div class="mask"></div></td>
   <td><a href="#"></a></td>
   <td class="lottery-unit lottery-unit-3"><img src="images/gift3.jpg"><div class="mask"></div></td>
  </tr>
  <tr>
   <td class="lottery-unit lottery-unit-6"><img src="images/gift6.jpg"><div class="mask"></div></td>
   <td class="lottery-unit lottery-unit-5"><img src="images/gift5.jpg"><div class="mask"></div></td>
   <td class="lottery-unit lottery-unit-4"><img src="images/gift4.jpg"><div class="mask"></div></td>
  </tr>
 </table>
</div>

<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
var lottery={
 index:-1, //当前转动到哪个位置,起点位置
 count:0, //总共有多少个位置
 timer:0, //setTimeout的ID,用clearTimeout清除
 speed:20, //初始转动速度
 times:0, //转动次数
 cycle:50, //转动基本次数:即至少需要转动多少次再进入抽奖环节
 prize:-1, //中奖位置
 init:function(id){
  if ($("#"+id).find(".lottery-unit").length>0) {
   $lottery = $("#"+id);
   $units = $lottery.find(".lottery-unit");
   this.obj = $lottery;
   this.count = $units.length;
   $lottery.find(".lottery-unit-"+this.index).addClass("active");
  };
 },
 roll:function(){
  var index = this.index;
  var count = this.count;
  var lottery = this.obj;
  $(lottery).find(".lottery-unit-"+index).removeClass("active");
  index += 1;
  if (index>count-1) {
   index = 0;
  };
  $(lottery).find(".lottery-unit-"+index).addClass("active");
  this.index=index;
  return false;
 },
 stop:function(index){
  this.prize=index;
  return false;
 }
};

function roll(){
 lottery.times += 1;
 lottery.roll();//转动过程调用的是lottery的roll方法,这里是第一次调用初始化
 if (lottery.times > lottery.cycle+10 && lottery.prize==lottery.index) {
  clearTimeout(lottery.timer);
  lottery.prize=-1;
  lottery.times=0;
  click=false;
 }else{
  if (lottery.times<lottery.cycle) {
   lottery.speed -= 10;
  }else if(lottery.times==lottery.cycle) {
   var index = Math.random()*(lottery.count)|0;
   lottery.prize = index;  
  }else{
   if (lottery.times > lottery.cycle+10 && ((lottery.prize==0 && lottery.index==7) || lottery.prize==lottery.index+1)) {
    lottery.speed += 110;
   }else{
    lottery.speed += 20;
   }
  }
  if (lottery.speed<40) {
   lottery.speed=40;
  };
  //console.log(lottery.times+'^^^^^^'+lottery.speed+'^^^^^^^'+lottery.prize);
  lottery.timer = setTimeout(roll,lottery.speed);//循环调用
 }
 return false;
}

var click=false;

window.onload=function(){
 lottery.init('lottery');
 $("#lottery a").click(function(){
  if (click) {//click控制一次抽奖过程中不能重复点击抽奖按钮,后面的点击不响应
   return false;
  }else{
   lottery.speed=100;
   roll(); //转圈过程不响应click事件,会将click置为false
   click=true; //一次抽奖完成后,设置click为true,可继续抽奖
   return false;
  }
 });
};
</script>
<!--效果html结束-->

</body>
</html>

效果如下:

jquery转盘抽奖功能实现

三、注意事项
.mask开始如下,用的是rgba,但是IE8不兼容,改为使用png图片background:url(images/mask.png) no-repeat;

.mask {
 width: 100%;
 height: 100%;
 position: absolute;
 left: 0;
 top: 0;
 background-color: rgba(252,211,4,0.5);
 display: none
}

希望大家可以从小编整理的这篇文章中有所收获,对大家实现抽奖功能有所帮助。

Javascript 相关文章推荐
Javascript 检测键盘按键信息及键码值对应介绍
Jan 03 Javascript
jQuery中setTimeout的几种使用方法小结
Apr 07 Javascript
禁用页面部分JavaScript不是全部而是部分
Sep 03 Javascript
js使用循环清空某个div中的input标签值
Sep 29 Javascript
JavaScript中的Promise使用详解
Jun 24 Javascript
Bootstrap组件系列之福利篇几款好用的组件(推荐)
Jun 23 Javascript
简单谈谈axios中的get,post方法
Jun 25 Javascript
开发中常用的25个JavaScript单行代码(小结)
Jun 28 Javascript
vue+elementUI组件table实现前端分页功能
Nov 15 Javascript
在Vue中创建可重用的 Transition的方法
Jun 02 Javascript
vue实现数字滚动效果
Jun 29 Javascript
vue过滤器实现日期格式化的案例分析
Jul 02 Javascript
javascript生成随机数方法汇总
Nov 12 #Javascript
js正则表达式验证邮件地址
Nov 12 #Javascript
每天一篇javascript学习小结(Boolean对象)
Nov 12 #Javascript
为何JS操作的href都是javascript:void(0);呢
Nov 12 #Javascript
基于jquery实现左右按钮点击的图片切换效果
Jan 27 #Javascript
js图片轮播效果实现代码
Apr 18 #Javascript
javascript伸缩菜单栏实现代码分享
Nov 12 #Javascript
You might like
PHP使用适合阅读的格式显示文件大小的方法
2015/03/05 PHP
php版微信数据统计接口用法示例
2016/10/12 PHP
PHP二维索引数组的遍历实例分析【2种方式】
2019/06/24 PHP
让innerHTML的脚本也可以运行起来
2006/07/01 Javascript
Sample script that displays all of the users in a given SQL Server DB
2007/06/16 Javascript
jquery获取ASP.NET服务器端控件dropdownlist和radiobuttonlist生成客户端HTML标签后的value和text值
2010/06/28 Javascript
基于jquery的图片懒加载js
2010/06/30 Javascript
『jQuery』名称冲突使用noConflict方法解决
2013/04/22 Javascript
javascript仿php的print_r函数输出json数据
2013/09/13 Javascript
Nodejs中自定义事件实例
2014/06/20 NodeJs
Javascript简单实现面向对象编程继承实例代码
2015/11/27 Javascript
jQuery添加和删除指定标签的方法
2015/12/16 Javascript
简单的js计算器实现
2016/10/26 Javascript
JavaScript事件冒泡与事件捕获实例分析
2018/08/01 Javascript
如何提升vue.js中大型数据的性能
2019/06/21 Javascript
vue中v-model对select的绑定操作
2020/08/31 Javascript
[04:56]经典回顾:前Ehome 与 前LGD
2015/02/26 DOTA
python中将阿拉伯数字转换成中文的实现代码
2011/05/19 Python
Python提示[Errno 32]Broken pipe导致线程crash错误解决方法
2014/11/19 Python
Python中的pprint折腾记
2015/01/21 Python
Python2.x和3.x下maketrans与translate函数使用上的不同
2015/04/13 Python
深入探究Django中的Session与Cookie
2017/07/30 Python
python numpy格式化打印的实例
2018/05/14 Python
python 爬虫百度地图的信息界面的实现方法
2019/10/27 Python
Anaconda的安装及其环境变量的配置详解
2020/04/22 Python
英国领先的NHS批准的在线药店:Pharmacy2U
2017/01/06 全球购物
Sneaker Studio捷克:购买运动鞋
2018/07/08 全球购物
美国礼品卡交易网站:Cardpool
2018/08/27 全球购物
EJB的激活机制
2013/10/25 面试题
幼师求职自荐信
2014/05/31 职场文书
优秀党员先进事迹材料
2014/12/18 职场文书
员工离职感谢信
2015/01/22 职场文书
雷锋观后感
2015/06/10 职场文书
2015年科学教研组工作总结
2015/07/22 职场文书
退休职工欢送会致辞
2015/08/01 职场文书
浅谈如何提高PHP代码质量之端到端集成测试
2021/05/28 PHP