前言
最近开发过程中，公司提了个需求，开发一个轮盘抽奖的活动页，没办法，咱之前也没接触过，只能现写一个，现在分享到掘金中供大家参考，需要源码的，也可以关注私信博主哦，免费分享
pc端
移动端
步骤
- 准备素材，大转盘背景图片、抽奖按钮图片、奖品列表图片
- 编写大转盘容器及样式
<div class="container">
<!-- 大转盘 -->
<div class="wrapper" id="wrapper">
<div class="part2">
<img class="part2-img" src="static/imgs/part2-bg.png" alt="" />
<ul class="part2-list">
<!-- js动态生成li -->
</ul>
</div>
<div id="pointer" class="rotate-pointer" data-click="">
<img
class="rotate-pointer-img"
src="static/imgs/pointer.png"
alt=""
/>
</div>
</div>
<!-- 大转盘 -->
</div>
/* 初始化 */
*,
*:before,
*:after {
box-sizing: border-box;
/* IE */
-ms-box-sizing: border-box;
/* 火狐 */
-moz-box-sizing: border-box;
/* 谷歌 */
-webkit-box-sizing: border-box;
/* 欧朋 */
-o-box-sizing: border-box;
padding: 0;
margin: 0;
}
/* 外部容器 */
.container {
overflow-x: hidden;
display: flex;
flex-direction: column;
align-items: center;
position: relative;
width: 100%;
min-height: 100vh;
margin: auto;
}
li {
list-style: none;
}
/* 大转盘 */
/* 大转盘容器 */
.wrapper {
position: relative;
z-index: 2;
width: 61.6rem;
height: 61.6rem;
}
/* 转盘 */
.part2 {
position: relative;
z-index: 2;
width: 61.6rem;
height: 61.6rem;
}
/*调整旋转速度和起始速率*/
.part2 {
transition: transform 5s;
transition-timing-function: cubic-bezier(0.42, 0, 0, 0.99);
}
/* 转盘图片 */
.part2-img {
position: absolute;
top: 0;
left: 0;
width: 61.6rem;
height: 61.6rem;
}
/* 奖品列表 */
.part2-list {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
/* IE */
-ms-transform: translate(-50%, -50%);
/* 火狐 */
-moz-transform: translate(-50%, -50%);
/* 谷歌 */
-webkit-transform: translate(-50%, -50%);
/* 欧朋 */
-o-transform: translate(-50%, -50%);
z-index: 2;
width: 50rem;
height: 50rem;
border-radius: 50%;
}
/* 奖品列表li根据奖品图片大小及文字数量细调top和left */
.part2-list > li:nth-child(1) {
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
position: absolute;
top: 6rem;
left: 27rem;
width: 10rem;
height: 10rem;
transform-origin: center center;
}
.part2-list > li:nth-child(2) {
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
position: absolute;
top: 18rem;
left: 35rem;
width: 10rem;
height: 10rem;
transform-origin: center center;
}
.part2-list > li:nth-child(3) {
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
position: absolute;
top: 30rem;
left: 32rem;
width: 10rem;
height: 10rem;
transform-origin: center center;
}
.part2-list > li:nth-child(4) {
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
position: absolute;
top: 36rem;
left: 19rem;
width: 10rem;
height: 10rem;
transform-origin: center center;
}
.part2-list > li:nth-child(5) {
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
position: absolute;
top: 29rem;
left: 8rem;
width: 10rem;
height: 10rem;
transform-origin: center center;
}
.part2-list > li:nth-child(6) {
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
position: absolute;
top: 17rem;
left: 5rem;
width: 10rem;
height: 10rem;
transform-origin: center center;
}
.part2-list > li:nth-child(7) {
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
position: absolute;
top: 6rem;
left: 13rem;
width: 10rem;
height: 10rem;
transform-origin: center center;
}
/* 奖品文案 */
.part2-list > li > span {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
width: 20rem;
height: 2rem;
line-height: 2rem;
font-size: 2rem;
font-family: MicrosoftYaHei;
color: #000000;
text-align: center;
}
/* 奖品图片 */
.part2-list > li > img {
width: 7.7rem;
height: 7.7rem;
}
/* 抽奖按钮 */
.rotate-pointer {
position: absolute;
z-index: 3;
top: calc((61.6rem / 2) - (15.6rem / 2) - (1.8rem / 2));
left: calc(50%);
transform: translateX(-50%);
width: 13.8rem;
height: 15.6rem;
}
/* 抽奖按钮图片 */
.rotate-pointer-img {
position: absolute;
top: 0;
left: 0;
width: 13.8rem;
height: 15.6rem;
}
/* 大转盘 */
- 以上步骤完成后，大转盘就出现了，但是无法进行抽奖，我们需要给它添加事件，控制轮盘抽奖
<script src="static/js/jquery-3.7.1.min.js"></script>
<script>
$(() => {
const scale = document.documentElement.clientWidth / 75;
document.documentElement.style.fontSize = `${scale}px`;
// 获取抽奖按钮，并绑定事件
let btn = $("#pointer");
// 点击抽奖按钮，传递奖品id，指定抽中哪个奖品
btn.bind("click", { id: 7 }, _begin);
let prizeList = $(".part2-list");
// 奖品配置列表
let options = [
{
id: "1",
name: "消化基金1元",
url: "static/prizes/prize1.png",
angleStart: (360 / 7) * 0 + 5,
angleEnd: (360 / 7) * 1 - 5,
tips: "恭喜您获得消化基金1元~~",
},
{
id: "2",
name: "消化基金10元",
url: "static/prizes/prize2.png",
angleStart: (360 / 7) * 1 + 5,
angleEnd: (360 / 7) * 2 - 5,
tips: "恭喜您获得消化基金10元~",
},
{
id: "3",
name: "消化基金50元",
url: "static/prizes/prize3.png",
angleStart: (360 / 7) * 2 + 5,
angleEnd: (360 / 7) * 3 - 5,
tips: "恭喜您获得消化基金50元~",
},
{
id: "4",
name: "消化基金100元",
url: "static/prizes/prize4.png",
angleStart: (360 / 7) * 3 + 5,
angleEnd: (360 / 7) * 4 - 5,
tips: "恭喜您获得消化基金100元~~",
},
{
id: "5",
name: "消化基金1000元",
url: "static/prizes/prize5.png",
angleStart: (360 / 7) * 4 + 5,
angleEnd: (360 / 7) * 5 - 5,
tips: "恭喜您获得消化基金1000元~",
},
{
id: "6",
name: "消化基金10000元",
url: "static/prizes/prize6.png",
angleStart: (360 / 7) * 5 + 5,
angleEnd: (360 / 7) * 6 - 5,
tips: "恭喜您获得消化基金10000元~",
},
{
id: "7",
name: "谢谢参与",
url: "static/prizes/prize7.png",
angleStart: (360 / 7) * 6 + 5,
angleEnd: (360 / 7) * 7 - 5,
tips: "很遗憾没有能中奖，再试一次吧~",
},
];
// 动态渲染奖品列表
for (let i = 0; i < options.length; i++) {
let liStr = `
<li style="transform: rotate(${options[i].angleEnd - 10}deg)">
<span>${options[i].name}</span>
<img src="${options[i].url}" alt="" />
</li>
`;
prizeList.append(liStr);
}
// 大转盘节流阀，防止抽奖过程中，再次点击抽奖
let flag = true;
// 抽奖按钮事件
function _begin(e) {
if (flag) {
flag = false;
// 奖品id
let { id } = e.data;
// 奖品index
let index = null;
// 获取奖品id对应的数组下标
for (let i = 0; i < options.length; i++) {
if (options[i].id == id) {
index = i;
}
}
// 和transition: transform 5s;对应，1*360等于5秒转5圈
let base = 1800;
let result = getRandom(
options[index].angleStart,
options[index].angleEnd
);
let deg = base - result;
console.log("奖品名称：", options[index].name);
console.log("奖品id：", id);
console.log("奖品index：", index);
// 旋转动画
$(".part2").css({
transition: "transform 5s",
});
$(".part2").css({ transform: "rotate(" + deg + "deg)" });
// 动画结束后初始化转盘
$(".part2").bind("transitionend", function () {
for (let i = 0; i < options.length; i++) {
if (
options[i].angleStart <= result &&
result <= options[i].angleEnd
) {
// 显示中奖提示
alert(options[i].tips);
dzpInit();
}
}
});
}
}
// 获取[n,m]的随机整数
function getRandom(n, m) {
let num = Math.floor(Math.random() * (m - n + 1) + n);
return num;
}
// 初始化大转盘
function dzpInit() {
$(".part2").css({
transition: "transform 0s",
transform: "rotate(" + 0 + "deg)",
});
$(".part2").unbind("transitionend");
// 初始化后开启大转盘
flag = true;
}
});
$(window).resize(() => {
const scale = document.documentElement.clientWidth / 75;
document.documentElement.style.fontSize = `${scale}px`;
});
</script>
、
- 以上一个大转盘的功能就出来啦
