九宫格转盘抽奖
抽奖效果有很多种，常见的有转盘、九宫格、随机码等等，本站之前做过几个转盘抽奖的例子（、、），今天来做一个九宫格的效果。
1、首先制作九宫格转盘，HTML、CSS 和 JavaScript 分别如下：
&div class="draw" id="lottery"&
&td class="item lottery-unit lottery-unit-0"&
&div class="img"&
&img src="images/img1.png" alt=""&
&span class="name"&虚拟主机 1元/年&/span&
&td class="gap"&&/td&
&td class="item lottery-unit lottery-unit-1"&
&div class="img"&
&img src="images/img2.png" alt=""&
&span class="name"&VPS 1元/30天&/span&
&td class="gap"&&/td&
&td class="item lottery-unit lottery-unit-2"&
&div class="img"&
&img src="images/img3.png" alt=""&
&span class="name"&.top域名 1元/年&/span&
&td class="gap-2" colspan="5"&&/td&
&td class="item lottery-unit lottery-unit-7"&
&div class="img"&
&img src="images/img4.png" alt=""&
&span class="name"&免费主机1年&/span&
&td class="gap"&&/td&
&td class=""&&a class="draw-btn" href="javascript:"&立即抽奖&/a&&/td&
&td class="gap"&&/td&
&td class="item lottery-unit lottery-unit-3"&
&div class="img"&
&img src="images/img5.png" alt=""&
&span class="name"&.com域名 19元/年&/span&
&td class="gap-2" colspan="5"&&/td&
&td class="item lottery-unit lottery-unit-6"&
&div class="img"&
&img src="images/img7.png" alt=""&
&span class="name"&.com域名 19元/年&/span&
&td class="gap"&&/td&
&td class="item lottery-unit lottery-unit-5"&
&div class="img"&
&img src="images/img6.png" alt=""&
&span class="name"&CDN加速 10元/15天&/span&
&td class="gap"&&/td&
&td class="item lottery-unit lottery-unit-4"&
&div class="img"&
&img src="images/img8.png" alt=""&
&span class="name"&20元快云币&/span&
这里使用的是表格布局，你也可以使用 ul/li 布局，只要用 CSS 制作成九宫格即可。
* { margin: 0; padding: 0; }
table { border-spacing: 0; border-collapse: text-align: }
.draw { width: 460 height: 470 margin: 0 padding: 40 background-image: url(images/bg.png);}
.draw .item { width: 150 height: 150 background-image: url(images/bg1.png); }
.draw .item.active { background-image: url(images/bg2.png); }
.draw .img { display: table- width: 150 height: 61 vertical-align: text-align: }
.draw .img img { vertical-align: }
.draw .gap { width: 5 }
.draw .gap-2 { height: 5 }
.draw .name { display: margin-top: 10 font-size: 14 }
.draw .draw-btn { display: height: 150 line-height: 150 border-radius: 20 font-size: 25 font-weight: 700; color: #f0ff00; background-color: #fe4135; text-decoration: }
.draw .draw-btn:hover { background-color: #fe8d85; }
CSS 代码并没有什么特别的地方，就是把 HTML 布局写成九宫格的样式。
JavaScript：
var lottery = {
index: -1,
//当前转动到哪个位置，起点位置
//总共有多少个位置
//setTimeout的ID，用clearTimeout清除
speed: 20,
//初始转动速度
//转动次数
cycle: 50,
//转动基本次数：即至少需要转动多少次再进入抽奖环节
prize: -1,
//中奖位置
init: function(id) {
if ($('#' + id).find('.lottery-unit').length & 0) {
$lottery = $('#' + id);
$units = $lottery.find('.lottery-unit');
this.obj = $
this.count = $units.
$lottery.find('.lottery-unit.lottery-unit-' + this.index).addClass('active');
roll: function() {
var index = this.
var count = this.
var lottery = this.
$(lottery).find('.lottery-unit.lottery-unit-' + index).removeClass('active');
index += 1;
if (index & count - 1) {
index = 0;
$(lottery).find('.lottery-unit.lottery-unit-' + index).addClass('active');
this.index =
stop: function(index) {
this.prize =
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;
if (lottery.times & lottery.cycle) { lottery.speed -= 10; } else if (lottery.times == lottery.cycle) { var index = Math.random() * (lottery.count) | 0; //静态演示，随机产生一个奖品序号，实际需请求接口产生 lottery.prize = } else { if (lottery.times & lottery.cycle + 10 && ((lottery.prize == 0 && lottery.index == 7) || lottery.prize == lottery.index + 1)) {
lottery.speed += 110;
lottery.speed += 20;
if (lottery.speed & 40) {
lottery.speed = 40;
lottery.timer = setTimeout(roll, lottery.speed); //循环调用
var click =
window.onload = function(){
lottery.init('lottery');
$('.draw-btn').click(function() {
if (click) { //click控制一次抽奖过程中不能重复点击抽奖按钮，后面的点击不响应
lottery.speed = 100;
roll(); //转圈过程不响应click事件，会将click置为false
click = //一次抽奖完成后，设置click为true，可继续抽奖
JavaScript 代码是抽奖的核心，此代码来自 ，主要代码已有注释，你也可以到代码出处查看更详细的说明。
(window.slotbydup=window.slotbydup || []).push({
id: '5504890',
container: s,
size: '728,90',
display: 'inlay-fix'
& CopyRight 2016 dowebok.com您的位置： →
→ 幸运星九宫格翻牌抽奖软件 v2.0.1 免费版
幸运星九宫格翻牌抽奖软件 v2.0.1 免费版九宫格抽奖软件|
网友评分：8
软件大小：7.2M
软件语言：中文
软件类型：国产软件
软件类别：免费软件 / 杂类工具
更新时间：
软件等级：
官方网站：
运行环境：WinAll, WinXP
软件厂商：
顶好评:50%
同类相关软件
13.7M/中文/10.07.2M/中文/10.04.6M/中文/10.04.0M/中文/10.04.2M/中文/.0
幸运星九宫格翻牌抽奖系统是一款不错的。软件绿色小巧，用户可以免费使用。支持自定义设置奖品信息，添加奖品项目等。多适用于公司年会、公司庆典等活动场合。需要的用户可以来下载使用！软件介绍幸运星九宫格翻牌抽奖系统是抽奖精灵系列下的另一款抽奖软件，本抽奖软件适合用于商场抽奖活动、企业年会、公司庆典活动等。用户可以设置奖品信息（奖品名称、图片、数量等）。软件会自动计算每次抽奖时的每个奖品的中奖概率。可以添加N个奖品项目，并且可以设置每个奖项的奖品数量。
授权：免费软件 WinAll, WinXP大小：7.2M语言：中文
幸运星砸金蛋抽奖系统是一款简单好用的抽奖软件。用户可以在线设置金蛋数量、位置，设置奖品名称、数量等等。还可以实时记录下抽奖的结果哦！可以适用于商品促销抽奖等场合！欢迎大家来绿色资源网下载使用！软件介绍幸运星砸金蛋抽奖系统是一款免费的电脑砸金蛋
软件特色1.幸运星九宫格翻牌抽奖软件可以设置N个奖品项目和奖品数量。2.幸运星九宫格翻牌抽奖系统抽奖界面可以完全自定义。3.体积虽然只有几十KB大小，一张图片大小，但是功能却十分强大，可DIY性与人性化简捷操作性非常强。
猜你喜欢 抽奖软件
抽奖软件一般用于现场抽奖活动中，之所以抽奖软件的需求这么高也是为了保障抽奖环节的公平公正。本专题就收集了一些常见的抽奖软件。这些免费的电脑抽奖软件既可以自动抽奖也可以设置为手动抽奖，常见的抽奖软件基本
其他版本下载
幸运星九宫格翻牌抽奖软件 v2.0.1 免费版
软件无法下载或下载后无法使用，请点击报错，谢谢！
请描述您所遇到的错误，我们将尽快予以修正，谢谢！
*必填项，请输入内容
本类下载排行
.01 3.02 7.83 2.24 10.05 10.06 5.87 3.08 1.69 10.010 10.011 .012 .013 10.014 4.615
本类精品软件
105KB/中文/10.0
装机必备软件
本类集合软件抽奖代码_抽奖特效_jquery抽奖代码
您当前位置： >> >>
jqueryhtml5
javascript
& CopyRight , , Inc.All Rights Reserved.为了账号安全，请及时绑定邮箱和手机
点击这里，将文章分享到自己的动态
【案例分享】制作一个九宫格抽奖
&!DOCTYPE html&
&meta charset="utf-8"&
&meta name="tips" content="为了以后方便，把常用的小效果制作整理，如有问题或者更好的方法，请告知！谢谢！！！！"&
&meta name="tips" content="朋友单位需求，随手做了一个，细想想还有许多细节没有处理，比如中奖机率啥的。。有时间在补充"&
&title&九宫格抽奖&/title&
*{padding:0;margin:0;}
.box{width:300height:300margin:100border:5position:}
dl dd{width:100height:100position:text-align:line-height:100border:1px solid #}
.start{width:100height:100position:top:100left:100background:color:#cursor:font-weight:text-align:line-height:100}
.start:hover{background:#f60;}
.a1{top:0;left:0;}
.a2{top:0left:100}
.a3{top:0left:200}
.a4{top:100left:200}
.a5{top:200left:200}
.a6{top:200left:100}
.a7{top:200left:0;}
.a8{top:100left:0;}
.on{width:90height:90border:5px solid #f60;}
&script src="http://code.jquery.com/jquery-latest.js"&&/script&
&script type="text/javascript"&
// 测试引用是否成功
$(document).ready(function(e) {
alert('test!');
&script src="http://code.jquery.com/jquery-latest.js"&&/script&
$(document).ready(function(){
var count=0;
$(".start").on("click",function(){
if($(".start").hasClass("aa"))
$(".start").removeClass("aa");
$(".start").html("开始");
clearInterval(timer);
$(".start").addClass("aa");
$(".start").html("暂停");
function tC(){
timer=setInterval(function(){
$("dd").each(function(){
$(this).removeClass("on");
$("dd").eq(count).addClass("on");
if(count==8){
&div class="box"&
&dd class="a1"&1111&/dd&
&dd class="a2"&2222&/dd&
&dd class="a3"&3333&/dd&
&dd class="a4"&444&/dd&
&dd class="a5"&555&/dd&
&dd class="a6"&666&/dd&
&dd class="a7"&777&/dd&
&dd class="a8"&888&/dd&
&div class="start"&开始&/div&
若觉得本文不错，就分享一下吧！
评论加载中...
看过此文的用户，还看了以下文章
正在加载中
Web前端工程师
作者相关文章