本文介紹九宮格抽獎功能的實現。 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 /** 九宮格形式添加圖片 ...