使用CSS3+jquery.js 實現微信抽獎轉盤效果

 

上次發表了一篇 微信抽獎轉盤活動-效果源碼分析 

最近想起了剛接到這個項目時第一時間腦海裏迸出的解決方法 「CSS3」!

爲何不能用CSS3來實現呢？ 因此我打算用CSS3來實現這個效果。並不須要依賴jquery的動畫效果插件，旋轉角度插件。

不廢話 貼源碼：

PS：該動畫不支持IE10及如下（11沒測 應該也不支持，想要全兼容訪問jquery版本-詳見第一行鏈接），其餘瀏覽器測試可用。UC，微信內核測試可用。

（DEMO附件在下方，需wamp環境。）

 

<!--最基本的結構-->  
 <div class="demo">
        <img id="disk" src="disk.jpg" />
        <img src="start.png" id="startbtn" class="start done">
 </div>

 

/*負責動畫效果的CSS*/
.done{
    -webkit-transition: 2s ease;
    -moz-transition:2s ease;
    -o-transition:2s ease;
    transition:2s ease;
}

$(function(){ 
     $("#startbtn").click(function(){ 
        lottery()                     //點擊執行函數ajax
    }); 
}); 
var a = 0;                            //聲明一個數值a
function lottery(){ 
    $.ajax({ 
        type: 'POST', 
        url: 'json.php', 
        dataType: 'json', 
        cache: false, 
        error: function(){ 
            alert('出錯了！'); 
            return false; 
        }, 
        success:function(json){         
            //角度  b = PHP傳來的角度 +720（爲了保證動畫不會太快中止 先轉兩圈）+ 聲明的數值a
            var b = json.angle+720+a; 
            //獎項 
            var p = json.prize;
            //點擊以後才能運行動畫，因此必須動態加載style 兩個值爲了兼容chrome & firefox & safair
            document.getElementById('startbtn').setAttribute("style","-webkit-transform: rotate("+b+"deg);transform: rotate("+b+"deg)")
            //每次執行完經過a使下次多轉3圈
            //由於每次執行動畫後CSS3中rotate()的值是保存的，若是不增長必定得角度，則將在PHP返回的角度內轉動，即360度之內轉動

            a += 1080;
            //動畫效果爲2S，動畫播放完執行彈窗效果
            setTimeout(slideFunction,2000);
            function slideFunction(){
                var con = confirm('恭喜你，中得'+p+'\n還要再來一次嗎？'); 
                if(con){ 
                    lottery(); 
                }else{ 
                    return false; 
                }
            }
        } 
    });
}

因爲是自學JS，寫的並不精簡.. 只爲實現想法的效果罷了。見諒！

下載地址：http://pan.baidu.com/s/1ntiCaKx

 

做者：Margo_test
出處：http://www.cnblogs.com/margo/

歡迎分享與轉載。