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 相关文章推荐
解密效果
Jun 23 Javascript
文本域光标操作的jQuery扩展分享
Mar 10 Javascript
JavaScript中的ArrayBuffer详细介绍
Dec 08 Javascript
获取jqGrid中选择的行的数据
Nov 30 Javascript
js实现把图片的绝对路径转为base64字符串、blob对象再上传
Dec 29 Javascript
微信小程序 九宫格实例代码
Jan 21 Javascript
Node.js通过身份证号验证年龄、出生日期与性别方法示例
Mar 09 Javascript
20个最常见的jQuery面试问题及答案
May 23 jQuery
LayUI动态设置checkbox不显示的解决方法
Sep 02 Javascript
js实现三角形粒子运动
Sep 22 Javascript
微信小程序实现通讯录列表展开收起
Nov 18 Javascript
vue 插槽简介及使用示例
Nov 19 Vue.js
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弹出对话框实现重定向代码
2014/01/23 PHP
PHP中的output_buffering详细介绍
2014/09/27 PHP
php实现用已经过去多长时间的方式显示时间
2015/06/05 PHP
详解thinkphp实现excel数据的导入导出(附完整案例)
2016/12/29 PHP
PHP观察者模式实例分析【对比JS观察者模式】
2019/05/22 PHP
js操作二级联动实现代码
2010/07/27 Javascript
jQuery的.live()和.die() 使用介绍
2011/09/10 Javascript
jQuery CSS3自定义美化Checkbox实现代码
2016/05/12 Javascript
微信小程序 页面跳转和数据传递实例详解
2017/01/19 Javascript
JS利用cookies设置每隔24小时弹出框
2017/04/20 Javascript
讲解vue-router之命名路由和命名视图
2018/05/28 Javascript
Vue 刷新当前路由的实现代码
2019/09/26 Javascript
javascript头像上传代码实例
2019/09/28 Javascript
小程序input数据双向绑定实现方法
2019/10/17 Javascript
javascript设计模式 ? 外观模式原理与用法实例分析
2020/04/15 Javascript
Python help()函数用法详解
2014/03/11 Python
Python进行数据科学工作的简单入门教程
2015/04/01 Python
python遍历文件夹,指定遍历深度与忽略目录的方法
2018/07/11 Python
PyCharm 设置SciView工具窗口的方法
2019/01/15 Python
使用python的turtle函数绘制一个滑稽表情
2020/02/28 Python
python实现按键精灵找色点击功能教程,使用pywin32和Pillow库
2020/06/04 Python
Python如何在windows环境安装pip及rarfile
2020/06/15 Python
基于Python实现简单学生管理系统
2020/07/24 Python
跨域修改iframe页面内容详解
2019/10/31 HTML / CSS
Amaze UI 文件选择域的示例代码
2020/08/26 HTML / CSS
假日旅行社实习自我鉴定
2013/09/24 职场文书
好军嫂事迹材料
2014/01/15 职场文书
服装设计师职业生涯规划范文
2014/02/28 职场文书
医院标语大全
2014/06/23 职场文书
普通党员对照检查材料
2014/09/24 职场文书
2015年效能监察工作总结
2015/04/23 职场文书
社区扶贫帮困工作总结
2015/05/20 职场文书
python爬虫之爬取笔趣阁小说
2021/04/22 Python
js实现自动锁屏功能
2021/06/02 Javascript
Pytorch可视化的几种实现方法
2021/06/10 Python
Python 发送SMTP邮件的简单教程
2021/06/24 Python