为jQuery的选择器: #选择ID,那么全局搜索:id="lottery"定位到了div九宫格区域 ...
一 用到的图片 二 代码如下,重点是js部分 效果如下: 三 注意事项 抽奖过程说明 上面只是前端展示的效果。中奖物品通过一个随机数生成。 真正开发中中奖物品是通过向后端接口发送请求返回的。 兼容性说明 .mask开始如下,用的是rgba,但是IE 不兼容,改为使用png图片background:url images mask.png no repeat 本文作者starof,因知识本身在变化,作 ...
2015-11-12 19:13 29 28094 推荐指数:
为jQuery的选择器: #选择ID,那么全局搜索:id="lottery"定位到了div九宫格区域 ...
工作需要,所以做了个抽奖转盘的插件,当然这里只做最简单的演示。可以用于取代一些flash抽奖程序。 机制说明: 1、通过定义lottery-unit来控制节点的个数及索引; 2、通过设置lottery.crcle来定义需要转动的基本次数,在这个次数内,定时器的时间间隔不断递减,知道 ...
本文介绍九宫格抽奖功能的实现。 1.需求 功能很简单,来看看高保截图,如下图1 图1 需求的功能点如下: 用户点击抽奖,九宫格四周的图片顺时针依次闪烁,空转几圈。 请求接口,等接口有返回后最后对应的奖品闪烁,其他奖品不闪烁。 登录后,正中间的抽奖这个小方格点亮,未登录是灰色 ...
...
五一告急,4月29日接到小任务,放假前做个九宫格转盘小页面,噢~~设计稿已出,当前时间下午两点, 正在改bug,主流项目30日得上线,九宫格30日中午得上线。时间略紧下午6点改完bug,加班搞九宫格。 一个页面,三屏内容,九宫格、结果弹窗和分享提示。 计划: 晚上写静态页面 ...
HTML代码: SCSS样式: JS代码: ...
...
说JQuery封装的专门用来处理九宫格抽奖的框架JQuery.latest.min.js,文件地址如下 ...