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 SHA-1:Secure Hash Algorithm
Dec 20 Javascript
执行iframe中的javascript方法
Oct 07 Javascript
JS+css 图片自动缩放自适应大小
Aug 08 Javascript
jQuery设置div一直在页面顶部显示的方法
Oct 24 Javascript
浅谈jQuery中height与width
Jul 06 Javascript
Javascript中arguments对象的详解与使用方法
Oct 04 Javascript
JavaScript实现经典排序算法之选择排序
Dec 28 Javascript
vue2.0中vue-cli实现全选、单选计算总价格的实例代码
Jul 18 Javascript
详解Layer弹出层样式
Aug 21 Javascript
微信小程序模板和模块化用法实例分析
Nov 28 Javascript
微信小程序自定义组件的实现方法及自定义组件与页面间的数据传递问题
Oct 09 Javascript
浅谈JavaScript中你可能不知道URL构造函数的属性
Jul 13 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
967 个函式
2006/10/09 PHP
PHP输出数组中重名的元素的几种处理方法
2012/09/05 PHP
解析php中session的实现原理以及大网站应用应注意的问题
2013/06/17 PHP
php日期操作技巧小结
2016/06/25 PHP
php实现推荐功能的简单实例
2019/09/29 PHP
jquery插件制作简单示例说明
2012/02/03 Javascript
jQuery控制图片的hover效果(smartRollover.js)
2012/03/18 Javascript
jquery解析XML字符串和XML文件的方法说明
2014/02/21 Javascript
基于js实现投票的实例代码
2015/08/04 Javascript
jQuery实现的多级下拉菜单效果代码
2015/08/24 Javascript
滚动条的监听与内容随着滚动条动态加载的实现
2017/02/08 Javascript
如何在AngularJs中调用第三方插件库
2017/05/21 Javascript
使用jQuery实现简单的tab框实例
2017/08/22 jQuery
Vue实现用户自定义字段显示数据的方法
2018/08/28 Javascript
vue指令之表单控件绑定v-model v-model与v-bind结合使用
2019/04/17 Javascript
关于vue项目中搜索节流的实现代码
2019/09/17 Javascript
微信小程序中weui用法解析
2019/10/21 Javascript
vue实现信息管理系统
2020/05/30 Javascript
多页vue应用的单页面打包方法(内含打包模式的应用)
2020/06/11 Javascript
微信小程序 button样式设置为图片的方法
2020/06/19 Javascript
[03:31]DOTA2英雄基础教程 大地之灵
2013/12/17 DOTA
使用python调用浏览器并打开一个网址的例子
2014/06/05 Python
django 常用orm操作详解
2017/09/13 Python
python爬虫正则表达式之处理换行符
2018/06/08 Python
用Python PIL实现几个简单的图片特效
2019/01/18 Python
在SQLite-Python中实现返回、查询中文字段的方法
2019/07/17 Python
python同时替换多个字符串方法示例
2019/09/17 Python
python批量替换文件名中的共同字符实例
2020/03/05 Python
Python基于jieba, wordcloud库生成中文词云
2020/05/13 Python
完美解决ARIMA模型中plot_acf画不出图的问题
2020/06/04 Python
Python3与fastdfs分布式文件系统如何实现交互
2020/06/23 Python
秘鲁购物网站:Linio秘鲁
2017/04/07 全球购物
工业设计专业推荐信
2013/10/29 职场文书
go语言-在mac下brew升级golang
2021/04/25 Golang
MySQL系列之四 SQL语法
2021/07/02 MySQL
关于python类SortedList详解
2021/09/04 Python