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 相关文章推荐
类之Prototype.js学习
Jun 13 Javascript
prototype 学习笔记整理
Jul 17 Javascript
jQuery-Tools-overlay 使用介绍
Jul 14 Javascript
深入理解javaScript中的事件驱动
May 21 Javascript
js实现Select列表各项上移和下移的方法
Aug 14 Javascript
Vue 过渡实现轮播图效果
Mar 27 Javascript
node.js中express中间件body-parser的介绍与用法详解
May 23 Javascript
vue2.0.js的多级联动选择器实现方法
Feb 09 Javascript
详解ES6 Fetch API HTTP请求实用指南
Nov 14 Javascript
Angular实现svg和png图片下载实现
May 05 Javascript
vue radio单选框,获取当前项(每一项)的value值操作
Sep 10 Javascript
浅谈vue.watch的触发条件是什么
Nov 07 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
在普通HTTP上安全地传输密码
2007/07/21 PHP
PHP详解ASCII码对照表与字符转换
2011/12/05 PHP
PHP中使用GD库绘制折线图 折线统计图的绘制方法
2015/11/09 PHP
Laravel框架中Blade模板的用法示例
2017/08/30 PHP
jquery 查找新建元素代码
2010/07/06 Javascript
对setInterval在火狐和chrome切换标签产生奇怪的效果之探索,与解决方案!
2011/10/29 Javascript
js Form.elements[i]的使用实例
2011/11/13 Javascript
12种不宜使用的Javascript语法整理
2013/11/04 Javascript
js中匿名函数的创建与调用方法分析
2014/12/19 Javascript
深入探讨javascript中的数据类型
2015/03/04 Javascript
js实现基于正则表达式的轻量提示插件
2015/08/29 Javascript
jQuery简单实现input文本框内灰色提示文本效果的方法
2015/12/02 Javascript
JS阻止事件冒泡行为和闭包的方法
2016/06/16 Javascript
JavaScript之Canvas_动力节点Java学院整理
2017/07/04 Javascript
vue动态子组件的两种实现方式
2019/09/01 Javascript
js cavans实现静态滚动弹幕
2020/05/21 Javascript
解决vue cli4升级sass-loader(v8)后报错问题
2020/07/30 Javascript
jQuery实现简单轮播图效果
2020/12/27 jQuery
Python 用户登录验证的小例子
2013/03/06 Python
总结python中pass的作用
2019/02/27 Python
Python实现字符型图片验证码识别完整过程详解
2019/05/10 Python
Django中信号signals的简单使用方法
2019/07/04 Python
django组合搜索实现过程详解(附代码)
2019/08/06 Python
Python 数据的累加与统计的示例代码
2020/08/03 Python
CSS3 滤镜 webkit-filter详细介绍及使用方法
2012/12/27 HTML / CSS
css3弹性盒子flex实现三栏布局的实现
2020/11/12 HTML / CSS
Sony C++笔试题
2013/03/10 面试题
北京泡泡网网络有限公司.net面试题
2012/07/17 面试题
Final类有什么特点
2012/04/25 面试题
竞选班长演讲稿
2013/12/30 职场文书
委托书的写法
2014/09/16 职场文书
城市轨道交通工程职业生涯规划书范文
2014/09/16 职场文书
干部考察材料范文
2014/12/24 职场文书
元宵节寄语大全
2015/02/27 职场文书
2015年七一建党节活动方案
2015/05/05 职场文书
创业计划书之零食店(进口)
2019/09/24 职场文书