二当家的提供了很多抽奖演示与下载:http://www.erdangjiade.com/search.html?keyword=%25E6%258A%25BD%25E5%25A5%2596。大部分抽奖的动画效果是由rotate这块抽奖插件完成的,相关rotate抽奖教程,请看jQuery幸运大转盘_jQuery+PHP抽奖程序(上) http://www.erdangjiade.com/js/19.html和教程下集http://www.erdangjiade.com/js/20.html
0、请不要问“在不在”之类的问题,有问题直接问!1、学生或暂时没有工作的童鞋,整站资源免费下载!2、¥9.9充值终身VIP会员,加我微信,826096331 拉你进VIP群学习!3、程序员加油,技术改变世界。在线 充值
抽奖页面html代码
<div class="turntable-bg">
<div class="pointer"><img src="images/pointer.png" alt="pointer"/></div>
<div class="rotate" ><img id="rotate" src="images/turntable.png" alt="turntable"/></div>
</div>
随机抽奖
function rnd(n, m) {
return Math.floor(Math.random() * (m - n + 1) + n)
}
奖品和角度
$('.pointer').click(function() {
if (bRotate)
return;
var item = rnd(0, 7);
switch (item) {
case 0:
//var angle = [26, 88, 137, 185, 235, 287, 337];
rotateFn(0, 337, '未中奖');
break;
case 1:
//var angle = [88, 137, 185, 235, 287];
rotateFn(1, 26, '免单4999元');
break;
case 2:
//var angle = [137, 185, 235, 287];
rotateFn(2, 88, '免单50元');
break;
case 3:
//var angle = [137, 185, 235, 287];
rotateFn(3, 137, '免单10元');
break;
case 4:
//var angle = [185, 235, 287];
rotateFn(4, 185, '免单5元');
break;
case 5:
//var angle = [185, 235, 287];
rotateFn(5, 185, '免单5元');
break;
case 6:
//var angle = [235, 287];
rotateFn(6, 235, '免分期服务费');
break;
case 7:
//var angle = [287];
rotateFn(7, 287, '提高白条额度');
break;
}
console.log(item);
});
开始和停止抽奖
var rotateFn = function(awards, angles, txt) {
bRotate = !bRotate;
$('#rotate').stopRotate();
$('#rotate').rotate({
angle: 0,
animateTo: angles + 1800,
duration: 8000,
callback: function() {
alert(txt);
bRotate = !bRotate;
}
})
};
友情提示:垃圾评论一律封号 加我微信:826096331拉你进VIP群学习群