- 前言:因为业务需求,需要实现一个九宫格抽奖,综合多种情况的考虑,最终实现如下效果九宫格抽奖效果图。其中图一是默认的数组存储的元素的下标,即从 0→8 共九个元素。图二即最终奖品的摆放位置图示,同时要对比图一。动态旋转效果是按照 0→7 的顺序进行旋转的,8为中心点击的开始按钮,不参与旋转。
- 奖品的展位示意图,结合两种示意图做对比,最终动态拼接奖品图以及开始按钮。后续通过切换奖品(及每个不同下标的小方块)的激活效果来实现跑马灯效果,最终会有一个指定奖品的id(后台api返回的),通过与存储的奖品数据循环遍历确定奖品的下标,通过指定奖品下标,通过JS判断,最终选中的奖品就是后台数据返回的奖品。
一、页面布局
- 图一: 【默认九宫格图】
- 图二: 【九宫格占位图】
HTML页面代码:
<!-- center为九宫格区域 -->
<div class="center">
<!-- box为九个格子,DOM拼接区域 -->
<ul id="box">
<!-- li中下标从0开始,0-8共九个格子 -->
<li class="prize jp-0 active">
<!-- 动态获取奖品图标和文字描述 -->
<img src="" draggable="false">
<p>xxxx</p>
</li>
<li>1</li>
<li>2</li>
<li>3</li>
<!-- 其中下标为4的格子是最中心的按钮 -->
<li class="no-price" id="drawBtn">
<div>开始抽奖</div>
</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
</ul>
</div>
二、页面样式
九宫格布局相关CSS页面样式:
.center ul {
box-sizing: border-box;
padding: 15px;
width: 100%;
height: 100%;
}
ul li {
float: left;
box-sizing: border-box;
width: 195px;
height: 195px;
background: #fff;
border-radius: 6px;
text-align: center;
}
ul li:nth-child(2),
ul li:nth-child(8) {
margin: 0 15px;
}
ul li:nth-child(4),
ul li:nth-child(6) {
margin: 15px 0;
}
ul li:nth-child(5) {
cursor: pointer;
margin: 15px;
background: #f86f05;
}
ul li:nth-child(5):hover