基于 jQuery + awardRotate 打造的移动端抽奖营销活动页模板。开箱即用，替换品牌素材即可上线。
大转盘抽奖是拉新促活转化率最高的 H5 营销形式之一。但转盘旋转动画、中奖概率控制、结果弹窗这些交互细节，从零开发往往要耗费数天时间反复调试。
这套模板把完整抽奖链路做成了现成页面：点击指针抽奖、转盘缓动旋转、中奖弹窗引导扫码领奖、活动倒计时提醒，全部已经写好。运营人员只需替换奖品文案与活动素材，一个下午即可上线一场抽奖活动。
模板亮点
1. 完整抽奖交互链路
点击指针 → 转盘旋转 → 停在中奖项 → 弹出中奖弹窗，整条抽奖体验闭环已完成。内置 6 个奖区（红包 ×3、谢谢参与 ×3），中奖结果由随机数直接控制，接入后端概率接口只需替换一处随机逻辑。
2. 专业缓动旋转动画
基于 awardRotate 插件实现 8 秒长缓动旋转，先加速后减速自然停在目标扇区（animateTo 角度 + 1800° 基础圈数），优先使用 CSS3 transform 并自动降级兼容旧浏览器，动画顺滑无跳帧。
3. 中奖转化弹窗
中奖后弹出「恭喜您中奖啦」结果弹窗，内置奖品名称与微信二维码展示位，「微信扫一扫，马上领取」引导用户完成领奖转化，是裂变引流的经典配置。
4. 活动紧迫感组件
- 双位倒计时：页面顶部与中部同步显示剩余活动时间，每秒刷新，到期自动显示「已结束」
- 动态截止时间：自动读取系统当前日期时间显示「截至 x月x日」
- 参与人数展示：「已有 1245 位用户参与抽奖」，从众心理拉动转化
5. 移动端 H5 适配
viewport 锁定缩放、320~640px 流式宽度布局，iPhone / 安卓主流机型与微信内置浏览器均正常展示，直接投放朋友圈、公众号菜单与广告落地页。
技术栈
| 技术 | 版本 | 用途 |
|---|---|---|
| jQuery | 1.7.1 | DOM 操作与事件 |
| awardRotate | — | 转盘旋转动画（CSS3 transform + 降级） |
| jQuery Reveal | — | 中奖结果模态弹窗 |
| normalize.css | — | 样式重置 |
项目结构
cjzp/
├── index.html # 抽奖转盘活动页（唯一入口）
├── css/
│ ├── style.css # 页面样式与移动端适配（主色 #feb747 金橙）
│ └── normalize.css # 样式重置
├── js/
│ ├── jquery.min.js # jQuery 1.7.1
│ ├── awardRotate.js # 转盘旋转动画插件
│ └── jquery.reveal.js # 弹窗插件
└── img/ # 转盘 / 指针 / 活动背景 / 中奖弹窗 / 二维码素材快速开始
纯静态模板，无需构建：
# 方式一：浏览器直接打开 index.html 即可预览
# 方式二：本地静态服务器（推荐）
python3 -m http.server 8080
# 访问 http://localhost:8080也可使用 VS Code Live Server 插件一键启动预览。
二次开发指南
| 需求 | 操作 |
|---|---|
| 更换品牌素材 | 替换 img/ 下转盘、指针、背景图，同名覆盖 |
| 修改奖品与概率 | 调整 index.html 中 rotateFn 的奖项数组和 rnd() 随机范围 |
| 修改活动规则文案 | 直接编辑 index.html 活动规则区文字 |
| 对接真实中奖接口 | 将 $('.pointer').click 内的随机逻辑替换为后端接口返回值 |
| 修改倒计时截止 | 修改 count_down('Djs_id_1','Djs_id_2','2016-06-30 23:59:59') 参数 |
| 更换主题色 | 修改 css/style.css 中 .ui_background_bg 的 #feb747 等色值 |
适用场景
电商促销抽奖、公众号涨粉活动、APP 下载推广、门店引流、节日营销（年会抽奖、双十一红包雨预热）、微信裂变海报落地页，任何需要大转盘抽奖形式的移动端 H5 营销活动。
从零自研 vs 使用本模板
| 维度 | 从零自研 | 使用本模板 |
|---|---|---|
| 交付周期 | 3~5 天 | 半天上线 |
| 页面还原度 | 需与设计稿反复对齐 | 成品级活动视觉直接可用 |
| 旋转动画 | 缓动曲线需反复调优 | 8 秒长缓动开箱即用 |
| 移动端适配 | 需逐机型调试 | 320~640px 流式适配已完成 |
| 维护成本 | 活动密集期来不及迭代 | 改文案换图即可复用下一场活动 |
在线预览
部署至任意静态托管（GitHub Pages / Vercel / 阿里云 OSS / 腾讯云 COS）即可获得在线访问地址，用于投放与分享。
评论0