jquery实现九宫格大转盘抽奖


Posted in Javascript onNovember 13, 2015

下面我们来分享一个九宫格抽奖特效

特效说明:

一款jQuery九宫格大转盘抽奖代码网页特效,点击抽奖按钮开始随机抽奖选择奖品,可设置起点位置、奖品数量、转动次数、中奖位置参数。(兼容测试:IE7及以上、Firefox、Chrome、Opera、Safari、360等主流浏览器)

HTML:

<!--效果html开始-->
<div id="lottery">
	<table border="0" cellpadding="0" cellspacing="0">
		<tr>
			<td class="lottery-unit lottery-unit-0"><img src="images/1.png"></td>
			<td class="lottery-unit lottery-unit-1"><img src="images/2.png"></td>
			<td class="lottery-unit lottery-unit-2"><img src="images/4.png"></td>
   <td class="lottery-unit lottery-unit-3"><img src="images/3.png"></td>
		</tr>
		<tr>
			<td class="lottery-unit lottery-unit-11"><img src="images/7.png"></td>
			<td colspan="2" rowspan="2"><a href="#"></a></td>
			<td class="lottery-unit lottery-unit-4"><img src="images/5.png"></td>
		</tr>
		<tr>
			<td class="lottery-unit lottery-unit-10"><img src="images/1.png"></td>
			<td class="lottery-unit lottery-unit-5"><img src="images/6.png"></td>
		</tr>
  <tr>
			<td class="lottery-unit lottery-unit-9"><img src="images/3.png"></td>
			<td class="lottery-unit lottery-unit-8"><img src="images/6.png"></td>
			<td class="lottery-unit lottery-unit-7"><img src="images/8.png"></td>
   <td class="lottery-unit lottery-unit-6"><img src="images/7.png"></td>
		</tr>
	</table>
</div>

js部分

<script type="text/javascript" src="jquery-1.8.3.min.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();
	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) {
			return false;
		}else{
			lottery.speed=100;
			roll();
			click=true;
			return false;
		}
	});
};
</script>

CSS部分

/* 效果CSS开始 */
#lottery{width:574px;height:584px;margin:0px auto;background:url(../images/bg.jpg) no-repeat;padding:50px 55px;}
#lottery table td{width:142px;height:142px;text-align:center;vertical-align:middle;font-size:24px;color:#333;font-index:-999}
#lottery table td a{width:284px;height:284px;line-height:150px;display:block;text-decoration:none;}
#lottery table td.active{background-color:#ea0000;}
/* 效果CSS结束 */

JS中可设置参数: 

index:-1,    //当前转动到哪个位置,起点位置
count:0,    //总共有多少个位置
timer:0,    //setTimeout的ID,用clearTimeout清除
speed:20,    //初始转动速度
times:0,    //转动次数
cycle:50,    //转动基本次数:即至少需要转动多少次再进入抽奖环节
prize:-1,    //中奖位置

最后奉上演示图

jquery实现九宫格大转盘抽奖

Javascript 相关文章推荐
javascript重复绑定事件造成的后果说明
Mar 02 Javascript
uploadify在Firefox下丢失session问题的解决方法
Aug 07 Javascript
JavaScript实现的图像模糊算法代码分享
Apr 22 Javascript
jquery 3D 标签云示例代码
Jun 12 Javascript
JavaScript实现常用二级省市级联下拉列表的方法
Mar 25 Javascript
jQuery的内容过滤选择器学习教程
Apr 18 Javascript
归纳下js面向对象的几种常见写法总结
Aug 24 Javascript
解决vue打包项目后刷新404的问题
Mar 06 Javascript
react router4+redux实现路由权限控制的方法
May 03 Javascript
Node.js使用Angular简单示例
May 11 Javascript
JS实现省市县三级下拉联动
Apr 10 Javascript
js实现表单项的全选、反选及删除操作示例
Jun 05 Javascript
jquery动画效果学习笔记(8种效果)
Nov 13 #Javascript
javascript:void(0)点击登录没反应怎么解决
Nov 13 #Javascript
javascript:void(0)是什么意思及href=#与href=javascriptvoid(0)的区别
Nov 13 #Javascript
每天一篇javascript学习小结(Date对象)
Nov 13 #Javascript
有关Promises异步问题详解
Nov 13 #Javascript
以jQuery中$.Deferred对象为例讲解promise对象是如何处理异步问题
Nov 13 #Javascript
Jquery promise实现一张一张加载图片
Nov 13 #Javascript
You might like
PHP中使用CURL获取页面title例子
2015/01/07 PHP
php源码分析之DZX1.5字符串截断函数cutstr用法
2015/06/17 PHP
CI框架支持$_GET的两种实现方法
2016/05/18 PHP
php array_udiff_assoc 计算两个数组的差集实例
2016/11/12 PHP
php中简单的对称加密算法实现
2017/01/05 PHP
javascript学习笔记(七)利用javascript来创建和存储cookie
2011/04/08 Javascript
把input初始值不写value的具体实现方法
2013/07/04 Javascript
Jquery Ajax方法传值到action的方法
2014/05/11 Javascript
javascript实现添加附件功能的方法
2015/11/18 Javascript
canvas知识总结
2017/01/25 Javascript
js的OOP继承实现(必看篇)
2017/02/18 Javascript
Vue动态组件实例解析
2017/08/20 Javascript
Vue2.0基于vue-cli+webpack同级组件之间的通信教程(推荐)
2017/09/14 Javascript
js断点调试心得分享(必看篇)
2017/12/08 Javascript
Vue中div contenteditable 的光标定位方法
2018/08/25 Javascript
Angular ElementRef简介及其使用
2018/10/01 Javascript
Vuex中的State使用介绍
2019/01/19 Javascript
基于JavaScript的数据结构队列动画实现示例解析
2020/08/06 Javascript
python爬取亚马逊书籍信息代码分享
2017/12/09 Python
Python Pandas找到缺失值的位置方法
2018/04/12 Python
Python对象转换为json的方法步骤
2019/04/25 Python
与Django结合利用模型对上传图片预测的实例详解
2019/08/07 Python
浅谈Tensorflow 动态双向RNN的输出问题
2020/01/20 Python
TensorFlow tf.nn.conv2d_transpose是怎样实现反卷积的
2020/04/20 Python
Virtualenv 搭建 Py项目运行环境的教程详解
2020/06/22 Python
pip install命令安装扩展库整理
2021/03/02 Python
纯CSS3编写的的精美动画进度条(无flash/无图像/无脚本/附源码)
2013/01/07 HTML / CSS
Parts Express:音频、视频和扬声器的第一来源
2017/04/25 全球购物
工程力学专业自荐信范文
2014/03/17 职场文书
教师党员批评与自我批评
2014/10/15 职场文书
员工工作表现自我评价
2015/03/06 职场文书
2015年事业单位工作总结
2015/04/27 职场文书
幼儿园老师工作总结2015
2015/05/22 职场文书
护士岗位竞聘书
2015/09/15 职场文书
家电创业计划书
2019/08/05 职场文书
Linux服务器离线安装 nginx的详细步骤
2022/06/16 Servers