jQuery商城大转盘抽奖效果

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 大转盘蛮合适的，用户体验也还不错。源码可以去这里看看，有参考值。