從網上找了個插件，自己整理了下思路，注釋了下，感覺挺好的。分享給大家，百度網盤下載看看吧。鏈接：http://pan.baidu.com/s/1pKO0eRx 密碼：hu35

效果：

?

html代碼：

<div class="demo"><h2>九宮格抽獎效果演示：</h2><ul id="lottery"><li id="lottery_1"><img src="images/j_1.jpg" width="185" height="90" alt="悟空公仔" /></li><li id="lottery_2"><img src="images/j_2.jpg" width="185" height="90" alt="小乖虎公仔" /></li><li id="lottery_3"><img src="images/j_3.jpg" width="185" height="90" alt="神秘大禮包" /></li><li id="lottery_8"><img src="images/j_4.jpg" width="185" height="90" alt="" /></li><li><a href="javascript:void(0);" onclick="start_lottery();"><img src="images/j_but.jpg" width="185" height="90" alt="開始抽獎" /></a></li><li id="lottery_4"><img src="images/j_5.jpg" width="185" height="90" alt="智能游戲手柄" /></li><li id="lottery_7"><img src="images/j_6.jpg" width="185" height="90" alt="游戲耳機" /></li><li id="lottery_6"><img src="images/j_7.jpg" width="185" height="90" alt="豆蛙抱枕" /></li><li id="lottery_5"><img src="images/j_8.jpg" width="185" height="90" alt="小角鹿公仔" /></li></ul></div>

?

js代碼：

/*******************************************/ /** author: adou **/ /** http://www.sucaihuo.com **/ /******************************************///產生隨機數 function rand(Min,Max){var Range = Max - Min;var Rand = Math.random();return(Min + Math.round(Rand * Range)); } //定義參數 var index = 1, //當前選中對象的位置fast, //在哪個獎品位置開始加速num = 8, //共有多少個抽獎對象cycle, //轉動多少圈speed = 300, //開始時速度flag = false, //正在抽獎標志lucky, //中獎號碼，實際應用由后臺產生award, //獎品名稱lottery; //抽獎對象//開始抽獎 function start_lottery(){if(flag){//alert('正在抽獎，請等待抽獎結果！');//return false;return void(0);}flag=true;index = 1; //當前選中對象的位置fast = rand(3,6); //在哪個位置開始加速cycle = rand(3,5); //轉動多少圈speed = 300; //開始時速度//模擬ajax請求的數據;此數據可以前端生成，也可以后臺生成。lucky = 8; //中獎號碼award = "xiaoxiong"; //獎品名稱show_lottery(); //執行抽獎/*$.ajax({url: 'lottery.php',type: "post",data:null,dataType: "json",timeout: 20000,cache: false,beforeSend: function(){// 提交之前},error: function(){//出錯flag=false;},success: function(res){//成功if(typeof(res.award_id)!='undefined'){lucky = res.award_id; //中獎號碼award = res.award_name; //獎品名稱show_lottery();}else{flag=false;alert(res.err);}}});*/ } //抽獎效果展示 function show_lottery(){if(index>num){index = 1;cycle--;}$('#lottery li').css('opacity',0.3);$('#lottery_'+index).css('opacity',1);if(index>fast) speed=100;//開始加速（每100毫秒執行一次）if(cycle==0 && lucky-index<rand(2,5)) speed=speed+200;//開始減速 快到中獎位置時，自動減速if(cycle<=0 && index==lucky){//結束抽獎，選中號碼 clearTimeout(lottery);setTimeout(function(){$('#lottery li').css('opacity',1);alert('恭喜您獲得：'+award);},1200);flag = false;}else{lottery = setTimeout(show_lottery,speed);}index++; }

?

轉載于:https://www.cnblogs.com/LChenglong/p/7685803.html

總結

以上是生活随笔為你收集整理的九宫格抽奖的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。