如何用jQuery+PHP實現(xiàn)的抽獎程序

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

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

準(zhǔn)備工作

首先要準(zhǔn)備素材，抽獎的界面用到兩張圖片，圓盤圖片和指針圖片，實際應(yīng)用中可以根據(jù)不同的需求制作不同的圓盤圖片。

接著制作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

要想讓指針轉(zhuǎn)動起來，如果不借助flash的話，我們可以使用html5的canvas實現(xiàn)圖片的旋轉(zhuǎn)，但是需要考慮瀏覽器兼容性，而一款jQuery插件完全可以實現(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，然后我們使用以下代碼就可以實現(xiàn)指針轉(zhuǎn)動了。

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

上面的代碼實現(xiàn)了：當(dāng)單擊指針“開始抽獎”按鈕，指針開始轉(zhuǎn)動，轉(zhuǎn)動角度為3600+a，即10圈后再轉(zhuǎn)動隨機產(chǎn)生的a角度，當(dāng)轉(zhuǎn)動角度到達(dá)3600+a度時停止轉(zhuǎn)動。

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

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