本文介绍九宫格抽奖功能的实现。 1.需求 功能很简单,来看看高保截图,如下图1 图1 需求的功能点如下: 用户点击抽奖,九宫格四周的图片顺时针依次闪烁,空转几圈。 请求接口,等接口有返回后最后对应的奖品闪烁,其他奖品不闪烁。 登录后,正中间的抽奖这个小方格点亮,未登录是灰色 ...
本文介绍九宫格抽奖功能的实现。 1.需求 功能很简单,来看看高保截图,如下图1 图1 需求的功能点如下: 用户点击抽奖,九宫格四周的图片顺时针依次闪烁,空转几圈。 请求接口,等接口有返回后最后对应的奖品闪烁,其他奖品不闪烁。 登录后,正中间的抽奖这个小方格点亮,未登录是灰色 ...
一、用到的图片 二、代码如下,重点是js部分 效果如下: 三、注意事项 1、抽奖过程说明 上面只是前端展示的效果。中奖物品通过一个随机数生成。 真正开发中中奖物品是通过向后端接口发送请求返回的。 2、兼容性说明 .mask ...
...
说JQuery封装的专门用来处理九宫格抽奖的框架JQuery.latest.min.js,文件地址如下 ...
HTML代码: SCSS样式: JS代码: ...
html: <div class="line_item" :class=" index == 1 ? 'active' : 'white_item'"> & ...
九宫格布局相关CSS页面样式: 三、代码逻辑 Luck幸运抽奖函数方法: 奖品列表DOM拼 ...
// 宽度(自定义) #define PIC_WIDTH 70 // 高度(自定义) #define PIC_HEIGHT 80 // 列数(自定义) #define COL_COUNT 3 /** 九宫格形式添加图片 ...