本文介绍九宫格抽奖功能的实现。 1.需求 功能很简单,来看看高保截图,如下图1 图1 需求的功能点如下: 用户点击抽奖,九宫格四周的图片顺时针依次闪烁,空转几圈。 请求接口,等接口有返回后最后对应的奖品闪烁,其他奖品不闪烁。 登录后,正中间的抽奖这个小方格点亮,未登录是灰色 ...
本文介绍一种 宫格抽奖,这种抽奖方式是九宫格抽奖的演变,只不过开始播放的时候是随机方式,不是顺时针播放了。 .需求 先看看高保,如下图 图 用户点击 立即抽奖 后 个奖品随机高亮 请求接口,待所有产品都高亮后,根据接口结果,固定在抽中奖品上 最后弹出中奖结果弹框 .思路 . 高亮 实现图片的高亮有很多种方式,上一篇九宫格抽奖中使用的是修改图片容器的背景色,这里也可以让UI同事涉及两套图片,一套是普 ...
2021-08-17 17:06 0 358 推荐指数:
本文介绍九宫格抽奖功能的实现。 1.需求 功能很简单,来看看高保截图,如下图1 图1 需求的功能点如下: 用户点击抽奖,九宫格四周的图片顺时针依次闪烁,空转几圈。 请求接口,等接口有返回后最后对应的奖品闪烁,其他奖品不闪烁。 登录后,正中间的抽奖这个小方格点亮,未登录是灰色 ...
html布局九宫格代码: <div class="draw_box"> <div class="item sprite-bg" v-for="(draw, index) in drawPrizes ...
html: <div class="line_item" :class=" index == 1 ? 'active' : 'white_item'"> & ...
九宫格布局相关CSS页面样式: 三、代码逻辑 Luck幸运抽奖函数方法: 奖品列表DOM拼 ...
...
说JQuery封装的专门用来处理九宫格抽奖的框架JQuery.latest.min.js,文件地址如下 ...
HTML代码: SCSS样式: JS代码: ...
介绍: 前端九宫格是一种常见的抽奖方式,js实现如下,掌握其原理,不论多少宫格,都可以轻松应对。(代码可复制直接运行看效果)。 该案例以四宫格入门,可扩展多宫格,奖品模块的布局可自由设置。 <!DOCTYPE html> <html lang="en"> ...