jquery手机端移动端大转盘抽奖效果代码-html代码-BFW代码库

代码语言：html

所属分类：大转盘

代码描述：jquery手机端移动端大转盘抽奖效果代码，可单独设置奖项和背景色。

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        body,ul,ol,li,p,h1,h2,h3,h4,h5,h6,form,fieldset,table,td,img,div{margin:0;padding:0;border:0;}
    body{color:#333; font-size:12px;font-family:"Microsoft YaHei"}
    ul,ol{list-style-type:none;}
    select,input,img,select{vertical-align:middle;}
    input{ font-size:12px;}
    a{ text-decoration:none; color:#000;}
    a:hover{color:#c00; text-decoration:none;}
    .clear{clear:both;}
    
    /* 大转盘样式 */
    .banner{display:block;width:95%;margin-left:auto;margin-right:auto;margin-bottom: 20px;}
    .banner .turnplate{display:block;width:100%;position:relative;}
    .banner .turnplate canvas.item{width:100%;}
    .banner .turnplate img.pointer{position:absolute;width: 28.5%;height: 37.5%;left: 35.9%;top: 27%;}
    *{
        margin:0;
        padding:0;
    }
    .roll{
        margin: 35px auto;
        width: 200px;
        height: 40px;
        overflow:hidden;
      
    }
    .roll ul{
        list-style: none;
    }
    .roll li{
        color:#fff;
        line-height:20px;
        font-size:14px;
        text-align:center;
    }
    .turnplate{
        animation-name:myfirst;
        animation-duration:5s;
        animation-timing-function:linear;
        animation-delay:2s;
        animation-iteration-count:infinite;
        animation-direction:alternate;
        animation-play-state:running;
        background-image:url(//repo.bfw.wiki/bfwrepo/images/zhuanpan/turnplate-bg.png);
        background-size:100% 100%;
    }
    .turnplate-bg{
        background-image:url(//repo.bfw.wiki/bfwrepo/images/zhuanpan/turnplate-bg.png);
        background-size:100% 100%;
    
    }
    .turnplate-bg_hover{
        background-image:url(//repo.bfw.wiki/bfwrepo/images/zhuanpan/turnplate-bg_hover.png);
        background-size:100% 100%;
    }
    /*@keyframes myfirst
    {
    	0%   {
    		backgroundImage:'../../image/kppPlayer/turnplate-bg.png';;
    	
    	}
    	100%   {
    		backgroundImage:'../../image/kppPlayer/turnplate-bg_hover.png';
    	
    	}
    }*/
    </style>
</head>

<body style="background:#e62d2d;overflow-x:hidden;">
    <div id="imgIcon">
        <img src="//repo.bfw.wiki/bfwrepo/images/zhuanpan/1.png" id="yiyi" style="display:none;" />
        <img src="//repo.bfw.wiki/bfwrepo/images/zhuanpan/2.png" id="yes-yi" style="display:none;" />
        <img src="//repo.bfw.wiki/bfwrepo/images/zhuanpan/3.png" id="hong_icon" style="display:none;" />
        <img src="//repo.bfw.wiki/bfwrepo/images/zhuanpan/4.png" id="sorry-img" style="display:none;" />
    </div>
    <div class="banner">
        <div class="turnplate" id="objs">
            <canvas class="item" id="wheelcanvas" width="422px" height="422px"></canvas>
            <img class="pointer" src="//repo.bfw.wiki/bfwrepo/images/zhuanpan/turnplate-pointer.png" />
        </div>
    </div>
    <div class="roll" id="roll">
        <ul>
            <li>恭喜xx1抽到xxxxxxxxx</li>
            <li>恭喜xx2抽到xxxxxxxxx</li>
            <li>恭喜xx3抽到xxxxxxxxx</li>
            <li>恭喜xx4抽到xxxxxxxxx</li>
            <li>恭喜xx5抽到xxxxxxxxx</li>
            <li>恭喜xx6抽到xxxxxxxxx</li>
            <li>恭喜xx7抽到xxxxxxxxx</li>
            <li>恭喜xx8抽到xxxxxxxxx</li>
        </ul>
    </div>
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery.1.11.min.js"></script>
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/awardRotate.min.js"></script>
    <script type="text/javascript">
        var turnplate={
        		restaraunts:[],				//大转盘奖品名称
        		colors:[],					//大转盘奖品区块对应背景颜色
        		outsideRadius:172,			//大转盘外圆的半径
        		textRadius:150,				//大转盘奖品位置距离圆心的距离
        		insideRadius:68,			//大转盘内圆的半径
        		startAngle:0,				//开始角度
        		bRotate:false				//false:停止;ture:旋转
        };
        
        $(document).ready(function(){
        	//添加大转盘的奖品与奖品区域背景颜色
        	turnplate.restaraunts = [ "会员卡一张","谢谢参与","门票一张","现金红包", "谢谢参与",];
        	turnplate.colors = ["#ffffff", "#CC0033", "#fd4984", "#ffffff", "#5fcbd4"];
        	var rotateTimeOut = function (){
        		$('#wheelcanvas').rotate({
        			angle:0,
        			animateTo:2160,
        			duration:8000,
        			callback:function (){
        				alert('网络超时，请检查您的网络设置！');
        			}
        		});
        	};
        
        	//旋转转盘 item:奖品位置; txt：提示语;
        	var rotateFn = function (item, txt){
        		var angles = item * (360 / turnplate.restaraunts.length) - (360 / (turnplate.restaraunts.length*2));
        		if(angles<270){
        			angles = 270 - angles; 
        		}else{
        			angles = 360 - angles + 270;
        		}
        		$('#wheelcanvas').stopRotate();
        		$('#wheelcanvas').rotate({
        			angle:0,
        			animateTo:angles+1800,
        			duration:8000,
        			callback:function (){
        				alert(txt);
        				turnplate.bRotate = !turnplate.bRotate;
        			}
        		});
        	};
        
        	$('.pointer').click(function (){
        		if(turnplate.bRotate)return;
        		turnplate.bRotate = !turnplate.bRotate;
        		//获取随机数(奖品个数范围内)
        		var item = 4;
        		//奖品数量等于10,指针落在对应奖品区域的中心角度[252, 216, 180, 144, 108, 72, 36, 360, 324, 288]
        		rotateFn(item, turnplate.restaraunts[item-1]);
        		/* switch (item) {
        			case 1:
        				rotateFn(252, turnplate.restaraunts[0]);
        				break;
        			case 2:
        				rotateFn(216, turnplate.restaraunts[1]);
        				break;
        			case 3:
        				rotateFn(180, turnplate.restaraunts[2]);
        				break;
        			case 4:
        				rotateFn(144, turnplate.restaraunts[3]);
        				break;
        			case 5:
        				rotateFn(108, turnplate.restaraunts[4]);
        				break;
        			case 6:
        				rotateFn(72, turnplate.restaraunts[5]);
        				break;
        			case 7:
        				rotateFn(36, turnplate.restaraunts[6]);
        				break;
        			case 8:
        				rotateFn(360, turnplate.restaraunts[7]);
        				break;
        			case 9:
        				rotateFn(324, t.........完整代码请登录后点击上方下载按钮下载查看