1. 首页
  2. 编程语言
  3. Web开发
  4. jQuery商城大转盘抽奖效果

jQuery商城大转盘抽奖效果

上传者: 2025-05-31 17:09:01上传 ZIP文件 378.19KB 热度 1次

jQuery 的抽奖大转盘,交互做得挺有意思。转盘分多个奖项扇区,用CSS3做外观,用jQuery控制旋转,逻辑上也不复杂。点一下按钮,轮子就转起来,停在哪个扇区就是奖品。适合放在商城活动页上,吸引用户来参与,互动感也强。

HTML 结构也挺简单,一个转盘容器加一个按钮就够了:

<div id="lottery-wheel"></div>
<button id="spin-button">抽奖</button>

CSS这块主要是用border-radius画圆,用transform搞定旋转。每个奖项当成一个.sector放进去就行了:

#lottery-wheel {
  width: 500px;
  height: 500px;
  border-radius: 50%;
  position: relative;
}
.sector {
  width: 100%;
  height: 100%;
  position: absolute;
}

再来就是jQuery的逻辑,核心是点击事件绑定和动态加旋转角度。可以加点transition动画,模拟真实抽奖的感觉:

$(document).ready(function() {
  $('#spin-button').on('click', function() {
    var randomAngle = Math.random() * 360;
    var rotationDuration = 2000;

$('#lottery-wheel').css({ 'transform': 'rotate(' + randomAngle + 'deg)', 'transition': 'transform ' + rotationDuration + 'ms ease-out' });

setTimeout(function() { // 这里写中奖逻辑,比如弹窗、提示框等 }, rotationDuration); }); });

嗯,逻辑挺直观的,也方便扩展。你可以加缓动、模拟减速、判断角度对应奖品这些,让效果更真实。还可以接个后台接口来返回奖品,防止作弊。

如果你在做商城或者活动页面,这种jQuery 大转盘蛮合适的,用户体验也还不错。源码可以去这里看看,有参考值。

下载地址
用户评论