抽奖大转盘js实现

抽奖大转盘实现代码：

html:    

<div class=”ly-plate”>
        <div class=”rotate-bg”>
           <div id=’lotteryBtn’/>
        </div>
    </div>

<script src=”scripts/jQueryRotate.2.2.js”></script>
<script src=”scripts/rotate_main.js”></script>

rotate_main.js:

/**
 * 抽奖大转盘相关
 */
$(function(){
    // 获取当前文件名
    var filename=location.href;
    var current_url=filename.substr(filename.lastIndexOf(‘/’)+1);
    current_url = current_url+’&award’;

//    alert(current_url);  

    var timeOut = function(){  //超时函数
        $(“#lotteryBtn”).rotate({
            angle:0, 
            duration: 10000, 
            animateTo: 2160, //这里是设置请求超时后返回的角度，所以应该还是回到最原始的位置，2160是因为我要让它转6圈，就是360*6得来的
            callback:function(){
                alert(‘网络超时’)
            }
        }); 
    }; 
    var rotateFunc = function(data){  //awards:奖项，angle:奖项对应的角度
        $(‘#lotteryBtn’).stopRotate();
        $(“#lotteryBtn”).rotate({
            angle:0, 
            duration: 5000, 
            animateTo: data[‘angle’]+1440, //angle是图片上各奖项对应的角度，1440是我要让指针旋转4圈。所以最后的结束的角度就是这样子^^
            callback:function(){
                alert(data[‘i_string’])
                flag = true;
                if(data[‘start’])
                {
                    if(data[‘prize’]>0)
                    {
                        window.location.href=data[‘award_url’];
                        return;
                    } else if(data[‘redirect_to_recommend’] == 1) {
                    window.location.href = data[‘redirect_to_recommend_url’];
                        return;
                    } else if(data[‘reload’] == 1) {
                    window.location.reload();
                    return;
                    }
                }
            }
        }); 
    };
    var flag = true;
    
    $(“#lotteryBtn”).rotate({ 
       bind: 
         { 
            click: function(){
                if(!flag) return false;
                flag = false;
//                alert(current_url)
                $.ajax({
                    type : ‘GET’,
                    url : current_url,
                    dataType : ‘json’,
                    success : function(data) {
//                     alert(JSON.stringify(data))
                        rotateFunc(data)
                    }
                })

            }
         } 
       
    });
    
})

$().ready(function(){
    setTimeout(function(){
        var client_width = document.body.clientWidth;
        var client_height = document.body.clientHeight;
        var scale = 0.8;
        var left = (1-scale)*client_width/2;
        
        $(‘.rotate-bg’).css(‘width’,client_width*scale).css(‘height’,client_width*scale).css(‘left’,left);
        
    },2)
})    

rotate.css

 .ly-plate{
    /*position:relative;*/
    width: 100%;
}
.rotate-bg{
    /*position:absolute;*/
    position: relative;
    top:0;
    left:0;
    text-align:center;
    /*宽高都是初始值，会动态赋值;*/
    width:300px;
    height:300px;
    display:block;
    background: url(../images/ly-plate.png) no-repeat left bottom;
    background-size:cover;
}

#lotteryBtn{border:none;z-index:5;width:40%;height:40%;margin-left:30%;margin-top:30%;position:absolute;background: url(../images/rotate-static.png) no-repeat left bottom;background-size:cover;}

.free p{
    text-align: center;
    padding: 8px;
    font-size: 13px;

}
.free p a{
    
}

.activity_rule {
position:absolute:
margin-right:10%;
margin-top:10%;
text-alidn:center;
}