大轉盤圖片展示:
幸運大轉盤.png
下載地址:http://www.jq22.com/jquery-info308
演示地址:http://www.jq22.com/yanshi308
引入需要的js文件這個不必多說,說下如何使用,代碼部分詳解
var rotateFunc = function(awards,angle,text){ //awards:你想要獎項的位置,angle:獎項對應的角度,像本案例我們分為八塊,角度之間的相差360/8=45°。
$('#lotteryBtn').stopRotate();
$("#lotteryBtn").rotate({
angle:0,
duration: 5000,
animateTo: angle+1440, //angle是圖片上各獎項對應的角度,1440是我要讓指針旋轉4圈。所以最后的結束的角度就是這樣子^^
callback:function(){
//當轉盤停止后執行的回調函數
alert(text)
}
});
};
當點擊轉盤中心開始抽獎
$("#lotteryBtn").rotate({
bind:
{
click: function(){
var time = [0,1];
time = time[Math.floor(Math.random()*time.length)];
if(time==0){
timeOut(); //網絡超時
}
if(time==1){
var data = [1,2,3,0]; //返回的數組
data = data = data[Math.floor(Math.random()*data.length)];//轉盤停止后你想讓它停留在第幾個位置
if(data==1){
rotateFunc(1,157,'恭喜您抽中的一等獎')
}
if(data==2){
rotateFunc(2,247,'恭喜您抽中的二等獎')
}
if(data==3){
rotateFunc(3,22,'恭喜您抽中的三等獎')
}
if(data==0){
var angle = [67,112,202,292,337];
angle = angle[Math.floor(Math.random()*angle.length)]
rotateFunc(0,angle,'很遺憾,這次您未抽中獎')
}
//22 67 112 157 202 247 292 337 八個位置的角度
}
}
}
});
還是不太理解的可以留言,看到后第一時間回復大家。