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 相关文章推荐
node.js中的Socket.IO使用实例
Nov 04 Javascript
JS实现向表格中动态添加行的方法
Mar 30 Javascript
jQuery选择器基础入门教程
May 10 Javascript
AngularJs学习第八篇 过滤器filter创建
Jun 08 Javascript
Javascript动画效果(2)
Oct 11 Javascript
AngularJS中如何使用echart插件示例详解
Oct 26 Javascript
各种选择框jQuery的选中方法(实例讲解)
Jun 27 jQuery
图文讲解vue的v-if使用方法
Feb 11 Javascript
Vue 子组件与数据传递问题及注意事项
Jul 11 Javascript
浅谈JS中this在各个场景下的指向
Aug 14 Javascript
vuex存取值和映射函数使用说明
Jul 24 Javascript
在elementui中Notification组件添加点击事件实例
Nov 11 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判断输入不超过mysql的varchar字段的长度范围
2011/06/24 PHP
隐藏Nginx或Apache以及PHP的版本号的方法
2016/01/03 PHP
php in_array() 检查数组中是否存在某个值详解
2016/11/23 PHP
浅谈socket同步和异步、阻塞和非阻塞、I/O模型
2016/12/15 PHP
JavaScript与Div对层定位和移动获得坐标的实现代码
2010/09/08 Javascript
jQuery弹出层始终垂直居中相对于屏幕或当前窗口
2013/04/01 Javascript
框架页面高度自动刷新的Javascript脚本
2013/11/01 Javascript
node.js微信公众平台开发教程
2016/03/04 Javascript
JS 实现可停顿的垂直滚动实例代码
2016/11/23 Javascript
JavaScript实现跟随滚动缓冲运动广告框
2017/07/15 Javascript
JS倒计时实例_天时分秒
2017/08/22 Javascript
Angularjs中ng-repeat的简单实例
2017/08/25 Javascript
vue自动化表单实例分析
2018/05/06 Javascript
解决eclipse中没有js代码提示的问题
2018/10/10 Javascript
微信小程序之侧边栏滑动实现过程解析(附完整源码)
2019/08/23 Javascript
关于JSON解析的实现过程解析
2019/10/08 Javascript
Python群发邮件实例代码
2014/01/03 Python
Python的Django框架中的数据过滤功能
2015/07/17 Python
详解Python使用tensorflow入门指南
2018/02/09 Python
python从子线程中获得返回值的方法
2019/01/30 Python
Python中的引用知识点总结
2019/05/20 Python
Pytorch 实现数据集自定义读取
2020/01/18 Python
解决IDEA 的 plugins 搜不到任何的插件问题
2020/05/04 Python
一文弄懂Pytorch的DataLoader, DataSet, Sampler之间的关系
2020/07/03 Python
Python如何截图保存的三种方法(小结)
2020/09/01 Python
英国第一的购买便宜玩具和游戏的在线购物网站:Bargain Max
2018/01/24 全球购物
Helly Hansen工作服美国官方网上商店:为最恶劣的环境
2019/09/04 全球购物
Java中有几种方法可以实现一个线程?用什么关键字修饰同步方法?stop()和suspend()方法为何不推荐使用?
2015/08/04 面试题
公司收款委托书范本
2014/09/20 职场文书
2015年光棍节活动总结
2015/03/24 职场文书
2015年设计师个人工作总结
2015/04/25 职场文书
企业年会祝酒词
2015/08/11 职场文书
2016同学毕业寄语大全
2015/12/04 职场文书
MySql开发之自动同步表结构
2021/05/28 MySQL
python之json文件转xml文件案例讲解
2021/08/07 Python
CSS实现鼠标悬浮动画特效
2023/05/07 HTML / CSS