• 欢迎访问小杰博客网站
  • 欢迎访问小杰博客网站哦

抽奖大转盘js实现

未分类 小杰 3年前 (2016-02-05) 99次浏览 已收录 0个评论

抽奖大转盘实现代码:

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;
}


小杰博客 , 版权所有丨如未注明 , 均为原创丨本网站采用BY-NC-SA协议进行授权
转载请注明原文链接:抽奖大转盘js实现
喜欢 (1)
发表我的评论
取消评论
表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址