如何用jQuery+PHP實現的抽獎程序

這篇文章給大家介紹如何用jQuery+PHP實現的抽獎程序，內容非常詳細，感興趣的小伙伴們可以參考借鑒，希望對大家能有所幫助。

在線抽獎程序在很多網站上得到應用，抽獎形式多種多樣，本站之前有專門介紹常見的翻板抽獎和隨機抽獎的文章，本文將給大家介紹轉盤抽獎，通過轉動轉盤指針來完成抽獎的一種抽獎形式——幸運大轉盤。

準備工作

首先要準備素材，抽獎的界面用到兩張圖片，圓盤圖片和指針圖片，實際應用中可以根據不同的需求制作不同的圓盤圖片。

接著制作html頁面，實例中我們在body中加入如下代碼：

<p class="demo">    <p id="disk"></p>    <p id="start"><img src="start.png" id="startbtn"></p> </p>

我們用#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}

jQuery

要想讓指針轉動起來，如果不借助flash的話，我們可以使用html5的canvas實現圖片的旋轉，但是需要考慮瀏覽器兼容性，而一款jQuery插件完全可以實現圖片（任意html元素）旋轉并兼容各大瀏覽器，它就是jQueryRotate.js。

使用jQueryRotate.js可以將圖片旋轉任意角度，可以綁定鼠標事件，可以設置旋轉過程動畫效果以及callback回調函數。

使用方法當然是先在head中載入jquery庫文件以及jQueryRotate.js，然后我們使用以下代碼就可以實現指針轉動了。

$(function(){ $("#startbtn").rotate({ bind:{ click:function(){//綁定click單擊事件 var a = Math.floor(Math.random() * 360); //生成隨機數 $(this).rotate({ duration:3000,//轉動時間間隔（轉動速度） angle: 0,  //開始角度            animateTo:3600+a, //轉動角度，10圈+ easing: $.easing.easeOutSine, //動畫擴展 callback: function(){ //回調函數 alert('中獎了！'); } }); } } }); });

上面的代碼實現了：當單擊指針“開始抽獎”按鈕，指針開始轉動，轉動角度為3600+a，即10圈后再轉動隨機產生的a角度，當轉動角度到達3600+a度時停止轉動。

需要注意的是，easing：動畫擴展我們需要結合動畫擴展插件才能實現。關于easing插件在這篇文章中有介紹：jQuery Easing 動畫效果擴展

關于如何用jQuery+PHP實現的抽獎程序就分享到這里了，希望以上內容可以對大家有一定的幫助，可以學到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。