Unsplash
这是之前国庆活动所做的一个新功能，以往抽奖都是采用转盘的形式，这次换了个新的玩法，折腾了两天才实现，主要代码出自哪里已经无法考究了，我做了部分优化，贴上来给大家参考下
HTML 结构代码
<ul id="lottery" class="clearfix">
<li class="lottery-unit turn_5">
<img src="images/turn_1.jpg">
<div class="mask"></div>
</li>
<li class="lottery-unit turn_6">
<img src="images/turn_2.jpg">
<div class="mask"></div>
</li>
<li class="lottery-unit turn_7">
<img src="images/turn_3.jpg">
<div class="mask"></div>
</li>
<li class="lottery-unit turn_8">
<img src="images/turn_4.jpg">
<div class="mask"></div>
</li>
<li class="lottery-unit turn_0">
<img src="images/turn_5.jpg">
<div class="mask"></div>
</li>
<li class="lottery-unit turn_1">
<img src="images/turn_6.jpg">
<div class="mask"></div>
</li>
<li class="lottery-unit turn_2">
<img src="images/turn_7.jpg">
<div class="mask"></div>
</li>
<li class="lottery-unit turn_3">
<img src="images/turn_8.jpg">
<div class="mask"></div>
</li>
<li class="lottery-unit turn_4">
<img src="images/turn_9.jpg">
<div class="mask"></div>
</li>
</ul>
<a class="rand_btn" href="javascript:void(0);"></a>
CSS 样式如下
#lottery {
width: 650px;
height: 650px;
margin: 100px auto 0;
}
.turn_1, .turn_2, .turn_3, .turn_4, .turn_5, .turn_6, .turn_7, .turn_8, .turn_0 {
width: 208px;
height: 208px;
float: left;
position: relative;
}
.turn_5, .turn_6, .turn_8, .turn_0, .turn_2, .turn_3 {
margin-right: 10px;
}
.turn_8, .turn_0, .turn_1, .turn_2, .turn_3, .turn_4 {
margin-top: 10px;
}
.lottery-unit img {
width: 208px;
height: 208px;
}
.active .mask {
display: block;
}
.mask {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
background: url(images/turn_active.png) no-repeat;
display: none;
}
.rand_btn {
margin: 60px auto 0;
display: block;
width: 40px;
height: 40px;
background: url(images/lottery.png) no-repeat;
background-size: 40px 40px;
}
JavaScript 代码如下，相关的转动次数已经转动速度，看注释就好了
var click = false;
var scratchableLatex = {
index: -1, //当前转动到哪个位置，起点位置
count: 0, //总共有多少个位置
timer: 0, //setTimeout的ID，用clearTimeout清除
speed: 100, //初始转动速度
times: 0, //转动次数
cycle: 50, //转动基本次数：即至少需要转动多少次再进入抽奖环节
prize: -1, //中奖位置
init: function(){
this.bindEvent();
this.lotteryInit('lottery');
},
bindEvent: function(){
var that = this;
$('body').on('click', '.rand_btn', function(){
if (click) {
//click控制一次抽奖过程中不能重复点击抽奖按钮，后面的点击不响应
return false;
}else{
that.rotateFunc(); // 转圈过程不响应click事件，会将click置为false
click = true; // 一次抽奖完成后，设置click为true，可继续抽奖
return false;
}
})
},
lotteryInit: 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('.turn_' + this.index).addClass('active');
};
},
roll: function() {
var index = this.index;
var count = this.count;
var lottery = this.obj;
$(lottery).find('.turn_' + index).removeClass('active');
index += 1;
if (index > count - 1) {
index = 0;
};
$(lottery).find('.turn_' + index).addClass('active');
this.index = index;
return false;
},
rotateFunc: function(){
var that = this;
this.times += 1;
this.roll();
if (this.times > this.cycle + 10 && this.prize == this.index) {
clearTimeout(this.timer);
this.prize = -1;
this.times = 0;
click = false;
}else {
if (this.times < this.cycle) {
this.speed -= 10;
}else if (this.times == this.cycle) {
var index = Math.random() * (this.count) | 0; //静态演示，随机产生一个奖品序号，实际需请求接口产生
this.prize = index;
}else {
if (this.times > this.cycle + 10 && ((this.prize == 0 && this.index == 7) || this.prize == this.index + 1)) {
this.speed += 80;
}else {
this.speed += 20;
}
}
if (this.speed < 40) {
this.speed = 40;
};
this.timer = setTimeout(function(){
that.rotateFunc()
}, this.speed); //循环调用
}
return false;
}
}
scratchableLatex.init();
运行结果
本篇的内容到这里就全部结束了，源码我已经发到了 GitHub Source_code 上了，有需要的同学可自行下载，预览效果可点击 effect
End of File
行文过程中出现错误或不妥之处在所难免，希望大家能够给予指正，以免误导更多人，最后，如果你觉得我的文章写的还不错，希望能够点一下喜欢和关注，为了我能早日成为简书优秀作者献上一发助攻吧，谢谢！^ ^
网友评论