jQuery仿商城风格圆形转盘抽奖效果
仿商城风格的大转盘抽奖,页面样式还原得挺像,转盘动画顺滑,抽奖逻辑也比较清晰,适合想快速上手搞个活动页面的场景。
jQuery 的圆形转盘抽奖效果,样式参考了各大电商的抽奖页,看着熟悉,上手也快。动画用的是setInterval
和rotate
结合实现的,转起来蛮顺滑,视觉效果还不错。
HTML 结构不复杂,主要是一个圆形容器加几个奖品项,position: absolute
定位搞定布局。事件触发那块也简单,点击按钮后通过随机数决定奖项,再计算角度让转盘停在对应位置。
逻辑部分封装得还行,不复杂但够用。适合那种“老板突然要搞个 618 抽奖活动”的时候快速套用,样式你也可以自己改成公司的主题色。
我还顺手挑了几个差不多的资源,风格和实现略有不同,想扩展或者微调的可以看看:
- jQuery 商城大转盘抽奖效果
- jquery 转盘抽奖
- JQuery 抽奖转盘源码
- jQuery 抽奖转盘动画
- Jquery 实现的转盘抽奖
- 转盘抽奖 ios 抽奖转盘
- jQuery 抽奖转盘制作幸运大转盘抽奖活动代码
如果你也正好要做个抽奖页,又不想从零写动画,不妨试试这个,改一改就能用,挺省事的。
下载地址
用户评论