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 相关文章推荐
学习jquery之一
Apr 27 Javascript
修改file按钮的默认样式实现代码
Apr 23 Javascript
利用javascript实现禁用网页上所有文本框,下拉菜单,多行文本域
Dec 14 Javascript
JavaScript italics方法入门实例(把字符串显示为斜体)
Oct 17 Javascript
JavaScript中的console.log()函数详细介绍
Dec 29 Javascript
js控制页面的全屏展示和退出全屏显示的方法
Mar 10 Javascript
轻松学习jQuery插件EasyUI EasyUI创建菜单与按钮
Nov 30 Javascript
原生和jQuery的ajax用法详解
Jan 23 Javascript
微信小程序支付功能 php后台对接完整代码分享
Jun 12 Javascript
可能被忽略的一些JavaScript数组方法细节
Feb 28 Javascript
Vue动态创建注册component的实例代码
Jun 14 Javascript
Angular8基础应用之表单及其验证
Aug 11 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
2006/10/09 PHP
php 远程图片保存到本地的函数类
2008/12/08 PHP
php多进程应用场景实例详解
2019/07/22 PHP
重定向实现代码
2006/11/20 Javascript
从新浪弄下来的全屏广告代码 与使用说明
2007/03/15 Javascript
JavaScript高级程序设计 XML、Ajax 学习笔记
2011/09/10 Javascript
js 表单提交后按钮变灰的实例代码
2013/08/16 Javascript
jquery给图片添加鼠标经过时的边框效果
2013/11/12 Javascript
轻松实现javascript图片轮播特效
2016/01/13 Javascript
JS简单获取及显示当前时间的方法
2016/08/03 Javascript
[原创]SyntaxHighlighter自动识别并加载脚本语言
2017/02/07 Javascript
Angular.js中处理页面闪烁的方法详解
2017/03/09 Javascript
nodejs async异步常用函数总结(推荐)
2017/11/17 NodeJs
Angular4 组件通讯方法大全(推荐)
2018/07/12 Javascript
VUE-Table上绑定Input通过render实现双向绑定数据的示例
2018/08/27 Javascript
ant-design-vue中tree增删改的操作方法
2020/11/03 Javascript
vuex的数据渲染与修改浅析
2020/11/26 Vue.js
[02:21]十步杀一人,千里不留行——DOTA2全新英雄天涯墨客展示
2018/08/29 DOTA
python常规方法实现数组的全排列
2015/03/17 Python
Python如何快速上手? 快速掌握一门新语言的方法
2017/11/14 Python
Python打包工具PyInstaller的安装与pycharm配置支持PyInstaller详细方法
2020/02/27 Python
使用sklearn的cross_val_score进行交叉验证实例
2020/02/28 Python
金蝶的一道SQL笔试题
2012/12/18 面试题
后勤人员岗位职责
2013/12/17 职场文书
职工趣味运动会方案
2014/02/10 职场文书
我的梦想演讲稿500字
2014/08/21 职场文书
2014年村党支部工作总结
2014/12/04 职场文书
2014年数学教研组工作总结
2014/12/06 职场文书
优秀团队申报材料
2014/12/26 职场文书
离开雷锋的日子观后感
2015/06/09 职场文书
Python离线安装openpyxl模块的步骤
2021/03/30 Python
jquery插件实现图片悬浮
2021/04/16 jQuery
在 HTML 页面中使用 React的场景分析
2022/01/18 Javascript
SQL注入篇学习之盲注/宽字节注入
2022/03/03 MySQL
js基于div丝滑实现贝塞尔曲线
2022/09/23 Javascript