[代码样式]九宫格转盘抽奖

[代码样式]九宫格转盘抽奖

简介

抽奖效果有很多种,常见的有转盘、九宫格、随机码等等,本站之前做过几个转盘抽奖的例子(百度、机锋、QQ音乐),今天来做一个九宫格的效果。

制作方法

1、首先制作九宫格转盘,HTML、CSS 和 JavaScript 分别如下:

HTML:

<div class="draw" id="lottery">
<table>
<tr>
<td class="item lottery-unit lottery-unit-0">
<div class="img">
<img src="https://www.dowebok.com/images/img1.png" alt="">
</div>
<span class="name">虚拟主机 1元/年</span>
</td>
<td class="gap"></td>
<td class="item lottery-unit lottery-unit-1">
<div class="img">
<img src="https://www.dowebok.com/images/img2.png" alt="">
</div>
<span class="name">VPS 1元/30天</span>
</td>
<td class="gap"></td>
<td class="item lottery-unit lottery-unit-2">
<div class="img">
<img src="https://www.dowebok.com/images/img3.png" alt="">
</div>
<span class="name">.top域名 1元/年</span>
</td>
</tr>
<tr>
<td class="gap-2" colspan="5"></td>
</tr>
<tr>
<td class="item lottery-unit lottery-unit-7">
<div class="img">
<img src="https://www.dowebok.com/images/img4.png" alt="">
</div>
<span class="name">免费主机1年</span>
</td>
<td class="gap"></td>
<td class=""><a class="draw-btn" href="https://www.dowebok.com/javascript:">立即抽奖</a></td>
<td class="gap"></td>
<td class="item lottery-unit lottery-unit-3">
<div class="img">
<img src="https://www.dowebok.com/images/img5.png" alt="">
</div>
<span class="name">.com域名 19元/年</span>
</td>
</tr>
<tr>
<td class="gap-2" colspan="5"></td>
</tr>
<tr>
<td class="item lottery-unit lottery-unit-6">
<div class="img">
<img src="https://www.dowebok.com/images/img7.png" alt="">
</div>
<span class="name">.com域名 19元/年</span>
</td>
<td class="gap"></td>
<td class="item lottery-unit lottery-unit-5">
<div class="img">
<img src="https://www.dowebok.com/images/img6.png" alt="">
</div>
<span class="name">CDN加速 10元/15天</span>
</td>
<td class="gap"></td>
<td class="item lottery-unit lottery-unit-4">
<div class="img">
<img src="https://www.dowebok.com/images/img8.png" alt="">
</div>
<span class="name">20元快云币</span>
</td>
</tr>
</table>
</div>

这里使用的是表格布局,你也可以使用 ul/li 布局,只要用 CSS 制作成九宫格即可。

CSS:

* { margin: 0; padding: 0; }
table { border-spacing: 0; border-collapse: collapse; text-align: center; }
.draw { width: 460px; height: 470px; margin: 0 auto; padding: 40px; background-image: url(images/bg.png);}
.draw .item { width: 150px; height: 150px; background-image: url(images/bg1.png); }
.draw .item.active { background-image: url(images/bg2.png); }
.draw .img { display: table-cell; width: 150px; height: 61px; vertical-align: middle; text-align: center; }
.draw .img img { vertical-align: top; }
.draw .gap { width: 5px; }
.draw .gap-2 { height: 5px; }
.draw .name { display: block; margin-top: 10px; font-size: 14px; }
.draw .draw-btn { display: block; height: 150px; line-height: 150px; border-radius: 20px; font-size: 25px; font-weight: 700; color: #f0ff00; background-color: #fe4135; text-decoration: none; }
.draw .draw-btn:hover { background-color: #fe8d85; }

CSS 代码并没有什么特别的地方,就是把 HTML 布局写成九宫格的样式。

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.lottery-unit-' + this.index).addClass('active');
};
},
roll: function() {
var index = this.index;
var count = this.count;
var lottery = this.obj;
$(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 = index;
return false;
},
stop: function(index) {
this.prize = index;
return false;
}
};
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;
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;
};
lottery.timer = setTimeout(roll, lottery.speed); //循环调用
}
return false;
}
var click = false;
window.onload = function(){
lottery.init('lottery');
$('.draw-btn').click(function() {
if (click) { //click控制一次抽奖过程中不能重复点击抽奖按钮,后面的点击不响应
return false;
} else {
lottery.speed = 100;
roll(); //转圈过程不响应click事件,会将click置为false
click = true; //一次抽奖完成后,设置click为true,可继续抽奖
return false;
}
});
};

JavaScript 代码是抽奖的核心,此代码来自 starof,主要代码已有注释,你也可以到代码出处查看更详细的说明。

隐藏内容,您需要满足以下条件方可查看
End

人已赞赏
脚本代码

[代码样式]直播平台主播列表效果

2020-8-24 10:16:29

脚本代码

[代码样式]微信读书页面源码

2020-8-24 10:16:31

下载说明

  • 1、微码盒所提供的压缩包若无特别说明,解压密码均为weimahe.com
  • 2、下载后文件若为压缩包格式,请安装7Z软件或者其它压缩软件进行解压;
  • 3、文件比较大的时候,建议使用下载工具进行下载,浏览器下载有时候会自动中断,导致下载错误;
  • 4、资源可能会由于内容问题被和谐,导致下载链接不可用,遇到此问题,请到文章页面进行反馈,以便微码盒及时进行更新;
  • 5、其他下载问题请自行搜索教程,这里不一一讲解。

站长声明

本站大部分下载资源收集于网络,只做学习和交流使用,版权归原作者所有;若为付费资源,请在下载后24小时之内自觉删除;若作商业用途,请到原网站购买;由于未及时购买和付费发生的侵权行为,与本站无关。本站发布的内容若侵犯到您的权益,请联系本站删除,我们将及时处理!
0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索