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