关闭

H5大转盘,结束后反馈结果

648人阅读 评论(0) 收藏 举报
分类:

自己写了一个大转盘效果,方便以后用到时直接修改使用

使用的图片资源:

roate.png



roate_btn.png


原理其实是一开始就已经设置好最终中奖结果,根据这个结果实现旋转的,旋转结束后可做相应操作,代码如下:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>大转盘测试</title>
<style>
.outBox{ width:300px; height:300px; position:fixed; left:50%; top:50%; -webkit-transform:translate(-50%,-50%); transform:translate(-50%,-50%);}
.roateBox{ width:300px; height:300px; background:url(roate.png) no-repeat center center; background-size:100%; position:absolute; left:0; top:0;}
.roateBox.toroate{
			-webkit-animation:setroate 5s .1s ease-in-out both;
			animation:setroate 5s .1s ease-in-out both;
}
.roateBtn{ width:72.6px; height:112.6px; background:url(roate_btn.png) no-repeat center center; background-size:100% 100%; position:absolute; left:50%; margin-left:-36.3px; top:73px; cursor:pointer;}
</style>
<style id="set_roate"></style>
</head>

<body>
<div class="outBox">
    <div class="roateBox"></div>
    <div class="roateBtn"></div>
</div>

<script type="text/javascript" src="http://code.jquery.com/jquery-2.0.0.min.js"></script>
<script type="text/javascript">
//一共多少等份
var equalParts = 8;
//注:根据转盘图片对应的值(转盘图片指针处顺时针向右数,奖品对应的格子数【第几等份上】)
var awardSetting = [
	[1,3,5,7],//“谢谢参与”对应的格子
	2,//“二等奖”对应的格子
	4,//“三等奖”对应的格子
	6,//“四等奖”对应的格子
	8//“一等奖”对应的格子
];
//每一等份多少度
var oneAngle = 360 / equalParts;
//根据 设置的 指针停止时指向的格子(中奖结果),设置其旋转角度区间
function setRoate(awardSettingNumber){//awardSettingNumber  取值范围 awardSetting的key值(0至4)
	//angleNumber  转盘停止时 指针 指向的格子
	angleNumber = awardSetting[awardSettingNumber];
	//未中奖对应的几个格子,随机取一个
	if(typeof(angleNumber) == 'object'){
		angleNumber = angleNumber[Math.floor(0 + Math.random() * (angleNumber.length - 0))];
	}
	//转盘停止时 指针 指向的格子 最小角度
	minAngle = 360 - angleNumber * oneAngle + 5;
	//转盘停止时 指针 指向的格子 最大角度
	maxAngle = 360 - (angleNumber - 1) * oneAngle - 5;
	//旋转区间
	newAngle = Math.floor(minAngle + Math.random() * (maxAngle - minAngle)) + 360 * 15;
	var newstyle = '';
	newstyle += '@-webkit-keyframes setroate{';
		newstyle += '0%{ -webkit-transform:rotate(0deg);}';
		newstyle += '100%{ -webkit-transform:rotate(' + newAngle + 'deg);}';
	newstyle += '}';
	newstyle += '@keyframes setroate{';
		newstyle += '0%{ transform:rotate(0deg);}';
		newstyle += '100%{ transform:rotate(' + newAngle + 'deg);}';
	newstyle += '}';
	$('#set_roate').html(newstyle);
	$('.roateBox').addClass('toroate');
	setTimeout(function(){
		roateEnd(awardSettingNumber);
	}, 5150);
}
//旋转结束执行
function roateEnd(awardSettingNumber){
	roateList = ['谢谢参与','二等奖','三等奖','四等奖','一等奖'];
	alert(roateList[awardSettingNumber]);
	$('.roateBox').removeClass('toroate');
	
	
	ifRoate = false;
}


var ifRoate = false;
//点击转动转盘
$('.roateBtn').on('click',function(){
	if(ifRoate){
		return;
	}else{
		ifRoate = true;
	}
	setRoate(1);//传入0至4的参数
});
</script>
</body>
</html>

0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:138223次
    • 积分:1961
    • 等级:
    • 排名:千里之外
    • 原创:72篇
    • 转载:6篇
    • 译文:0篇
    • 评论:12条
    文章分类
    最新评论