目前好多網(wǎng)站上應(yīng)用的轉(zhuǎn)盤抽獎(jiǎng)程序大多是基于flash的，而本文結(jié)合實(shí)例將使用jQuery和PHP來實(shí)現(xiàn)轉(zhuǎn)盤抽獎(jiǎng)程序，為了便于理解，作者分兩部分來講解，本文講解第一部分，側(cè)重使用jQuery實(shí)現(xiàn)轉(zhuǎn)盤的轉(zhuǎn)動效果。第二部分側(cè)重使用PHP后臺代碼控制抽獎(jiǎng)幾率并最終實(shí)現(xiàn)轉(zhuǎn)盤抽獎(jiǎng)，將在下一篇文章中有講解。
首先要準(zhǔn)備素材，抽獎(jiǎng)的界面用到兩張圖片，圓盤圖片和指針圖片，實(shí)際應(yīng)用中可以根據(jù)不同的需求制作不同的圓盤圖片。
接著制作html頁面，實(shí)例中我們在body中加入如下代碼：
<div class="demo"> <div id="disk"></div> <div id="start"><img src="start.png" id="startbtn"></div></div>我們用#disk來放置圓盤背景圖片，在css中控制，用#start來放置指針圖片start.png。
然后我們使用CSS來控制指針和圓盤的位置，代碼如下：
.demo{width:417px; height:417px; position:relative; margin:50px auto}#disk{width:417px; height:417px; background:url(disk.jpg) no-repeat}#start{width:163px; height:320px; position:absolute; top:46px; left:130px;}#start img{cursor:pointer}要想讓指針轉(zhuǎn)動起來，如果不借助flash的話，我們可以使用html5的canvas實(shí)現(xiàn)圖片的旋轉(zhuǎn)，但是需要考慮瀏覽器兼容性，而一款jQuery插件完全可以實(shí)現(xiàn)圖片（任意html元素）旋轉(zhuǎn)并兼容各大瀏覽器，它就是jQueryRotate.js。
使用jQueryRotate.js可以將圖片旋轉(zhuǎn)任意角度，可以綁定鼠標(biāo)事件，可以設(shè)置旋轉(zhuǎn)過程動畫效果以及callback回調(diào)函數(shù)。
使用方法當(dāng)然是先在head中載入jquery庫文件以及jQueryRotate.js，然后我們使用以下代碼就可以實(shí)現(xiàn)指針轉(zhuǎn)動了。
$(function(){ $("#startbtn").rotate({ bind:{ click:function(){//綁定click單擊事件 var a = Math.floor(Math.random() * 360); //生成隨機(jī)數(shù) $(this).rotate({ duration:3000,//轉(zhuǎn)動時(shí)間間隔（轉(zhuǎn)動速度） angle: 0, //開始角度 animateTo:3600+a, //轉(zhuǎn)動角度，10圈+ easing: $.easing.easeOutSine, //動畫擴(kuò)展 callback: function(){ //回調(diào)函數(shù) alert('中獎(jiǎng)了！'); } }); } } });});上面的代碼實(shí)現(xiàn)了：當(dāng)單擊指針“開始抽獎(jiǎng)”按鈕，指針開始轉(zhuǎn)動，轉(zhuǎn)動角度為3600+a，即10圈后再轉(zhuǎn)動隨機(jī)產(chǎn)生的a角度，當(dāng)轉(zhuǎn)動角度到達(dá)3600+a度時(shí)停止轉(zhuǎn)動。
需要注意的是，easing：動畫擴(kuò)展我們需要結(jié)合動畫擴(kuò)展插件才能實(shí)現(xiàn)。關(guān)于easing插件在這篇文章中有介紹：jQuery Easing 動畫效果擴(kuò)展
本文到此已完成了轉(zhuǎn)盤轉(zhuǎn)動指針的過程，但是需要結(jié)合抽獎(jiǎng)控制才算一個(gè)完整的抽獎(jiǎng)程序，我們在下篇文章中將介紹使用PHP來控制抽獎(jiǎng)幾率，以及如何應(yīng)用jQuery與PHP完成抽獎(jiǎng)的交互過程，敬請關(guān)注。
