JQ+CSS实现老虎机抽奖效果

---

date: 2020-08-07
categoery: [技术,前端,JavaScript]
toc: true

介绍

现在不少app都会有一些抽奖活动，热门的抽奖当属九宫格循环抽奖，而还有一种抽奖形式也是比较常见，比如老虎机的形式

预期效果

那么我们就用JQ和CSS实现一下这个效果。

简单的实现思路

其实这个效果和实现一个轮播图是有异曲同工之妙的

假设现在有1，2，3三个奖品，我们可以在一个ul内使用多个序列拼接成一个长列表:1–2--3–1--2–3--1–2--3–1--2–3…以此类推

每一组1–2--3视为一个集合，抽奖开始从第一个集合的某个奖品开始，到最后一个集合的某个奖品结束，中间使用transition加transform实现动效。

当每一次抽奖动效完成后ul会挺在最后一个集合的元素上，这个时候就需要让ul‘瞬移’一下，移动到当前这个奖项对应的第一个集合中的奖项，以便下一次抽奖

有了这个大概的思路，就可以着手于实现了

先定义一下DOM结构

我们实现的是上文提到的那个例子，但是为了简洁，我们的dom结构就先定义简单一点

<div class="game-content">
	<div class="game-goods-wrap">
		<div class="game-goods-list">
			<div class="game-goods" style="background: #ffffff;">
				<div class="game-goods-box" id="game1">
					<ul class="game-goods-ul"></ul>
				</div>
			</div>
			<div class="game-goods" style="background: #ffffff;">
				<div class="game-goods-box" id="game2">
					<ul class="game-goods-ul"></ul>
				</div>
			</div>
			<div class="game-goods" style="background: #ffffff;">
				<div class="game-goods-box" id="game3">
					<ul class="game-goods-ul"></ul>
				</div>
			</div>
		</div>
	</div>
	<span class="game-btn"></span>
</div>

核心动效的实现

然后我们开始书写核心动效实现的封装函数，对外提供可以配置的接口option：

luckGame: function(options) {
   
	va