[jQuery插件] jqueryrotate：抽奖转盘

第一步：引入js文件

<script src="js/jquery-1.8.3.min.js"></script>
<script src="js/jquery.rotate.min.js"></script>

第二步：编写html结构代码

<!--转盘层开始-->
<div class="wheel">
<button id="plateBtn" class="btn" title="开始抽奖">开始抽奖</button>
</div>
<!--转盘层结束-->

<!--获奖信息弹层开始-->
<div id="result">
<div class="dialog">
<p id="resultTxt"></p>
<a id="resultBtn" href="javascript:" title="关闭">关闭</a>
</div>
</div>
<!--获奖信息弹层结束-->

第三步：写入启动js代码

<script>
$(function(){
var $plateBtn = $('#plateBtn');
var $result = $('#result');
var $resultTxt = $('#resultTxt');
var $resultBtn = $('#resultBtn');

$plateBtn.click(function(){
$plateBtn.attr("disabled",true); //防止按钮多次被点击
var data = [0, 1, 2, 3, 4, 5, 6, 7];
data = data[Math.floor(Math.random()*data.length)];
switch(data){
case 1:
rotateFunc(1,69,'恭喜你抽中了<br><em>奇迹鼠标垫</em>');
break;
case 2:
rotateFunc(2,114,'恭喜你抽中了<br><em>开学大礼包</em>');
break;
case 3:
rotateFunc(3,159,'恭喜你抽中了<br><em>小米体重称</em>');
break;
case 4:
rotateFunc(4,204,'恭喜你抽中了<br><em>豪气新人大礼包</em>');
break;
case 5:
rotateFunc(5,249,'恭喜你抽中了<br><em>奇迹U盘</em>');
break;
case 6:
rotateFunc(6,294,'恭喜你抽中了<br><em>霸气新人大礼包</em>');
break;
case 7:
rotateFunc(7,339,'恭喜你抽中了<br><em>奇迹抱枕</em>');
break;
default:
rotateFunc(0,24,'恭喜你抽中了<br><em>至尊新人大礼包</em>');
}
});

var rotateFunc = function(awards,angle,text){  //awards:奖项，angle:奖项对应的角度
$plateBtn.stopRotate();
$plateBtn.rotate({
angle: 0,
duration: 5000,
animateTo: angle + 1440,  //angle是图片上各奖项对应的角度，1440是让指针固定旋转4圈
callback: function(){
$resultTxt.html(text);
$result.show();
}
});
};

$resultBtn.click(function(){
$result.hide();
$plateBtn.attr("disabled",false); //使按钮可以再次被点击
});
});
</script>