DIV CSS 佈局教程網

為什麼不能用CSS3來實現呢？ 所以我打算用CSS3來實現這個效果。並不需要依賴jquery的動畫效果插件，旋轉角度插件。

不廢話 貼源碼：

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

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

 

<!--最基本的結構-->  
 <div class="demo">
        <img id="disk" src=/School/UploadFiles_7810/201603/20160313141239402.jpg" />
        <img src=/School/UploadFiles_7810/201603/20160313141239649.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